La mejor manera de incluir CSS? ¿Por qué usar @import?

Voy a jugar al abogado del diablo, porque odio cuando la gente está de acuerdo demasiado.

1. Si necesita una hoja de estilo que dependa de otra, utilice @import. Haga la optimización en un paso separado.

Hay dos variables para las que está optimizando en un momento dado: el rendimiento de su código y el rendimiento del desarrollador. En muchos, si no en la mayoría de los casos, es más importante hacer que el desarrollador sea más eficiente, y solo entonces hacer que el código sea más eficiente performant .

Si tiene una hoja de estilo que depende de otra, lo más lógico es ponerla en dos archivos separados y usar @import. Eso tendrá el sentido más lógico para la siguiente persona que mire el código.

(¿Cuándo sucedería tal dependencia? Es bastante raro, en mi opinión - por lo general, una hoja de estilo es suficiente. Sin embargo, hay algunos lugares lógicos para poner cosas en diferentes archivos CSS:)

• Tematización: Si tiene diferentes esquemas de color o temas para la misma página, pueden compartir algunos, pero no todos los componentes.
• Subcomponentes: Un ejemplo artificial - digamos que tienes una página de restaurante que incluye un menú. Si el menú es muy diferente del resto de la página, será más fácil de mantener si está en su propio archivo.

Normalmente las hojas de estilo son independientes, por lo que es razonable incluirlas todas usando <link href>. Sin embargo, si son dependientes jerarquía, usted debe hacer lo que tiene el sentido más lógico de hacer.

Python usa import; C usa include; JavaScript tiene require. CSS tiene importación; cuando lo necesite, úselo!

2. Una vez que llegues al punto donde el sitio necesita escalar, concatena todo el CSS.

Múltiples solicitudes CSS de de cualquier tipo - ya sea a través de enlaces o a través de @imports - son malas prácticas para sitios web de alto rendimiento. Una vez que estés en el punto donde la optimización importa, todo tu CSS debe fluir a través de un minificador. Cssmin combina instrucciones de importación; como @Brandon señala, grunt tiene múltiples opciones para hacerlo también. (Ver también esta pregunta).

Una vez que estás en la etapa minificada, <link> es más rápido, como la gente ha señalado, por lo que a lo sumo enlace a unas pocas hojas de estilo y no @importar ninguna si es posible.

Sin embargo, antes de que el sitio alcance la escala de producción, es más importante que el código es organizado y lógico, que eso va un poco más rápido.

Es mejor NO usar @import para incluir CSS en una página por razones de velocidad. Vea este excelente artículo para saber por qué no: http://www.stevesouders.com/blog/2009/04/09/dont-use-import /

También es a menudo más difícil minificar y combinar archivos css que se sirven a través de la etiqueta @import, porque los scripts de minify no pueden "despegar" las líneas @import de otros archivos css. Cuando los incluyas como etiquetas

Entonces: use <link /> en lugar de @import.

Usando el método link, las hojas de estilo se cargan en paralelo (más rápido y mejor), y casi todos los navegadores admiten link

Import carga todos los archivos css adicionales uno por uno (más lento), y podría darle Flash De Contenido sin Estilo

@Nebo Iznad Mišo Grgur

Las siguientes son todas las formas correctas de usar @import

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Realmente no hay mucha diferencia en agregar una hoja de estilos css en la cabeza frente al uso de la funcionalidad de importación. El uso de @import se usa generalmente para encadenar hojas de estilo para que se pueda extender fácilmente. Podría usarse para intercambiar fácilmente diferentes diseños de color, por ejemplo, junto con algunas definiciones CSS generales. Yo diría que la principal ventaja / propósito es la extensibilidad.

También estoy de acuerdo con el comentario de xbonez en que se agregan portabilidad y mantenibilidad beneficio.

Son muy similares. Algunos pueden argumentar que @import es más fácil de mantener. Sin embargo, cada @import le costará una nueva solicitud HTTP de la misma manera que usando el método "link". Así que en el contexto de la velocidad no es más rápido. Y como dijo "duskwuff", no carga simultáneamente, lo que es una caída.

Un lugar donde uso @import es cuando estoy haciendo dos versiones de una página, inglés y francés. Construiré mi página en inglés, usando un main.css. Cuando construya la versión francesa, enlazaré a una hoja de estilo francesa (main_fr.css). En la parte superior de la hoja de estilo francesa, voy a importar el principal.css, y luego redefinir reglas específicas para solo las partes que necesito diferentes en la versión francesa.

Citado de http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

El propósito principal del método @import es usar varias hojas de estilo en una página, pero solo un enlace en su . Por ejemplo, una corporación puede tener una hoja de estilo global para cada página del sitio, con sub-secciones que tienen estilos adicionales que solo se aplican a esa sub-sección. Vinculando a la hoja de estilos de subsección e importando los estilos globales en la parte superior de ese estilo hoja, usted no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada sub-sección. El único requisito es que todas las reglas @import deben ir antes que el resto de tus reglas de estilo. Y recuerde que la herencia todavía puede ser un problema.

A veces tienes que usar @import en lugar de inline . Si está trabajando en una aplicación compleja que tiene 32 o más archivos CSS y debe admitir IE9, no hay opción. IE9 ignora cualquier archivo css después de los primeros 31 y esto incluye y css en línea. Sin embargo, cada hoja puede importar otras 31.

Hay muchas buenas razones para usar @import.

Una poderosa razón para usar @import es hacer un diseño entre navegadores. Las hojas importadas, en general, están ocultas en muchos navegadores antiguos, lo que le permite aplicar un formato específico para navegadores muy antiguos como Netscape 4 o series anteriores, Internet Explorer 5.2 para Mac, Opera 6 y anteriores, e IE 3 y 4 para PC.

Para hacer esto, en su base.archivo css usted podría tener lo siguiente:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

En su hoja personalizada importada (newerbrowsers.css) simplemente aplique el nuevo estilo en cascada:

html body {
  font-size:1em;
}

El uso de unidades "em" es superior a las unidades "px", ya que permite que tanto las fuentes como el diseño se extiendan en función de la configuración del usuario, donde, como los navegadores más antiguos, lo hacen mejor con las unidades basadas en píxeles (que son rígidas y no se pueden cambiar en la configuración del usuario del navegador). La hoja importada no sería vista por la mayoría de los navegadores más antiguos.

Puede que sí, ¡a quién le importa! Intente ir a algunos sistemas gubernamentales o corporativos anticuados más grandes y todavía verá los navegadores más antiguos utilizados. Pero su diseño es realmente bueno, porque el navegador que amas hoy en día también algún día será anticuado y anticuado también. Y usar CSS de una manera limitada significa que ahora tiene un grupo aún más grande y creciente de agentes de usuario que no funcionan bien con su sitio.

Usando @import la compatibilidad de su sitio web entre navegadores ahora alcanzará una saturación del 99.9% simplemente porque muchos navegadores antiguos no leerán las hojas importadas. Garantiza que aplique un conjunto básico de fuentes simples para su html, pero CSS más avanzado es utilizado por los agentes más nuevos. Esto permite que el contenido sea accesible para los agentes más antiguos sin comprometer las pantallas visuales enriquecidas necesarias en los navegadores de escritorio más nuevos.

Recuerde, los navegadores modernos almacenan las estructuras HTML y CSS muy bien después de la primera llamada a un sitio web. Múltiples llamadas al servidor no es el cuello de botella que una vez fue.

Megabytes y megabytes de API Javascript y JSON subidos a dispositivos inteligentes y marcado HTML mal diseñado eso no es consistente entre las páginas es el principal impulsor de la renderización lenta hoy en día. Tu página de noticias de Google promedio es más de 6 megabytes de ECMAScript solo para renderizar un poco de texto! LOL

Unos pocos kilobytes de CSS en caché y HTML limpio consistente con huellas de javascript más pequeñas se renderizarán en un agente de usuario a velocidad de rayo simplemente porque el navegador almacena en caché tanto el marcado DOM consistente como el CSS, a menos que elija manipular y cambiar eso a través de trucos de circo javascript.

Creo que la clave en esto son las dos razones por las que realmente está escribiendo varias hojas de estilo CSS.

1. Usted escribe varias hojas porque las diferentes páginas de su sitio web requieren diferentes definiciones CSS. O al menos no todos ellos requieren todas las definiciones CSS que otras páginas requieren. Así que divide los archivos CSS para optimizar qué hojas se cargan en las diferentes páginas y evitar cargar demasiadas definiciones CSS.
2. La segunda razón que viene a la mente es que su CSS se está volviendo tan grande que se vuelve torpe de manejar y con el fin de que sea más fácil mantener el archivo CSS grande que los divide en varios archivos CSS.

Por la primera razón se aplicaría la etiqueta adicional <link> ya que esto le permite cargar diferentes conjuntos de archivos CSS para diferentes páginas.

Por la segunda razón, la instrucción @import aparece como la más útil porque obtiene varios archivos CSS, pero los archivos cargados siempre son los igual.

Desde la perspectiva del tiempo de carga no hay diferencia. El navegador tiene que comprobar y descargar los archivos CSS separados sin importar cómo se implementen.

Use @import en su CSS si está utilizando un RESET CSS, como Reset CSS v2.0 de Eric Meyer, por lo que hace su trabajo antes de aplicar su CSS, evitando así conflictos.

Creo que @import es más útil cuando se escribe código para varios dispositivos. Incluya una instrucción condicional para incluir solo el estilo para el dispositivo en cuestión, luego solo se cargará una hoja. Aún puede usar la etiqueta de enlace para agregar cualquier elemento de estilo común.

Experimenté un "pico alto" de hojas de estilo enlazadas que puedes agregar. Si bien agregar cualquier número de Javascript vinculado no fue un problema para mi proveedor de host gratuito, después de duplicar el número de hojas de estilo externas, obtuve un bloqueo/ralentización. Y el ejemplo de código correcto es:

@import 'stylesheetB.css';

Por lo tanto, lo encuentro útil para tener un buen mapa mental, como mencionó Nitram, mientras todavía codifica el diseño. Buena suerte. Y perdono los errores gramaticales en inglés, si los hay.

Casi no hay razón para usar @import, ya que carga cada archivo CSS importado por separado y puede ralentizar su sitio significativamente. Si está interesado en la forma óptima de lidiar con CSS(cuando se trata de velocidad de página), así es como debe lidiar con todo su código CSS:

• Abra todos sus archivos CSS y copie el código de cada archivo
• Pegue todo el código entre una sola etiqueta de ESTILO en el encabezado HTML de su page
• Nunca use CSS @ import o archivos CSS separados para entregar CSS a menos que tenga una gran cantidad de código o haya una necesidad específica de hacerlo.

Información Más detallada aquí: http://www.giftofspeed.com/optimize-css-delivery/

La razón por la que lo anterior funciona mejor es porque crea menos solicitudes para que el navegador se ocupe y puede comenzar inmediatamente a renderizar el CSS en lugar de descargar archivos separados.

Esto podría ayudar a un desarrollador PHP. Las siguientes funciones eliminarán el espacio en blanco, eliminarán los comentarios y concatenarán todos sus archivos CSS. Luego insértelo en una etiqueta <style> en el encabezado antes de cargar la página.

La siguiente función eliminará los comentarios y minimizará los pasados en css. Está emparejado junto con la siguiente función.

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Llamará a esta función en el encabezado de su documento.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

Incluya la función concatenateCSS() en el encabezado del documento. Pasar en una matriz con los nombres de sus hojas de estilo con su ruta IE: css/styles.css. No es necesario agregar la extensión .css ya que se agrega automáticamente en la función anterior.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>