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

Básicamente, me pregunto cuál es la ventaja / propósito de usar @importpara importar hojas de estilo en una hoja de estilo existente en lugar de simplemente agregar otra ...

<link rel="stylesheet" type="text/css" href="" />

a la cabeza del documento?

Desde el punto de vista de la velocidad de la página, @importcasi nunca se debe usar un archivo CSS, ya que puede evitar que las hojas de estilo se descarguen simultáneamente. Por ejemplo, si la hoja de estilo A contiene el texto:

@import url("stylesheetB.css");

entonces la descarga de la segunda hoja de estilo puede no comenzar hasta que se haya descargado la primera. Si, por otro lado, ambas hojas de estilo están referenciadas en <link>elementos en la página HTML principal, ambas pueden descargarse al mismo tiempo. Si ambas hojas de estilo siempre se cargan juntas, también puede ser útil simplemente combinarlas en un solo archivo.

En ocasiones, hay situaciones en las que @importes apropiado, pero generalmente son la excepción, no la regla.

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

1. Si necesita una hoja de estilo que dependa de otra, use @import. Realice 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 .

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

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

• Temas: si tiene diferentes esquemas de colores o temas para la misma página, pueden compartir algunos, pero no todos los componentes.
• Subcomponentes: un ejemplo artificial: digamos que tiene 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.

Por lo general, las hojas de estilo son independientes, por lo que es razonable incluirlas todas usando <link href>. Sin embargo, si son una jerarquía dependiente, debe hacer lo que tenga más sentido lógico.

Python usa importación; Los usos de C incluyen; JavaScript ha requerido. CSS tiene importación; cuando lo necesites, úsalo!

2. Una vez que llegue al punto donde el sitio necesita escalar, concatene todo el CSS.

Múltiples solicitudes CSS de cualquier tipo, ya sea a través de enlaces o a través de @imports, son una mala práctica para los sitios web de alto rendimiento. Una vez que esté en el punto donde la optimización es importante, todo su CSS debería fluir a través de un minificador. Cssmin combina declaraciones de importación; Como señala @Brandon, Grunt también tiene múltiples opciones para hacerlo. ( Ver también esta pregunta ).

Una vez que está en la etapa minimizada, <link>es más rápido, como lo ha señalado la gente, por lo que, como mucho, enlace a algunas hojas de estilo y no importe 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 esté organizado y sea lógico, que que vaya un poco más rápido.

Es mejor NO usar @importpara 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/

Además, a menudo es más difícil minificar y combinar archivos css que se sirven a través de la etiqueta @import, porque los scripts minify no pueden "despegar" las líneas @import de otros archivos css. Cuando los incluye como <etiquetas de enlace, puede usar los módulos existentes minify php / dotnet / java para hacer la minificación.

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

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

importar carga cualquier archivo css adicional uno por uno (más lento) y podría proporcionarle 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 estilo CSS en la cabeza en comparación con el uso de la funcionalidad de importación. El uso @importse usa generalmente para encadenar hojas de estilo para que se pueda extender fácilmente. Se podría usar para intercambiar fácilmente diferentes diseños de color, por ejemplo, junto con algunas definiciones generales de CSS. Yo diría que la principal ventaja / propósito es la extensibilidad.

Estoy de acuerdo con el comentario de xbonez también en que la portabilidad y la mantenibilidad son beneficios adicionales.

Ellos 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 utilizando el método de "enlace". Entonces, en el contexto de la velocidad, no es más rápido. Y como dijo "duskwuff", no se carga simultáneamente, lo cual 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 main.css. Cuando compile la versión en francés, vincularé a una hoja de estilo en francés (main_fr.css). En la parte superior de la hoja de estilo francesa, importaré main.css y luego redefiniré reglas específicas solo para las partes que necesito en la versión francesa.

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

El objetivo principal del método @import es usar varias hojas de estilo en una página, pero solo un enlace en su <head>. Por ejemplo, una corporación podría tener una hoja de estilo global para cada página del sitio, con subsecciones con estilos adicionales que solo se aplican a esa subsección. Al vincular a la hoja de estilo de subsección e importar los estilos globales en la parte superior de esa hoja de estilo, no tiene que mantener una hoja de estilo gigantesca con todos los estilos para el sitio y cada subsección. El único requisito es que las reglas de @import deben estar antes que el resto de las reglas de estilo. Y recuerde que la herencia aún puede ser un problema.

A veces tienes que usar @import en lugar de en línea. Si está trabajando en una aplicación compleja que tiene 32 o más archivos css y debe admitir IE9, no hay otra 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 razón poderosa para usar @import es hacer un diseño de navegador cruzado. Las hojas importadas, en general, están ocultas de 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 archivo base.css 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 las fuentes y el diseño se estiren según la configuración del usuario, mientras que los navegadores más antiguos funcionan mejor con píxeles (que son rígidos 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 antiguos.

Puede que sí, a quién le importa! Intente ir a algunos sistemas gubernamentales o corporativos anticuados más grandes y aún verá esos navegadores más antiguos utilizados. Pero es realmente un buen diseño, porque el navegador que amas hoy también será algún día anticuado y anticuado. Y usar CSS de forma 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.

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

Recuerde, los navegadores modernos almacenan en caché las estructuras HTML y CSS extremadamente bien después de la primera llamada a un sitio web. Las llamadas múltiples al servidor no son el cuello de botella que alguna vez fue.

Megabytes y megabytes de Javascript API y JSON cargados en dispositivos inteligentes y el marcado HTML mal diseñado que no es coherente entre las páginas es el principal impulsor de la representación lenta en la actualidad. ¡Su página de noticias promedio de Google tiene más de 6 megabytes de ECMAScript solo para representar un poco de texto! Jajaja

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

Creo que la clave en esto son las dos razones por las que en realidad estás escribiendo múltiples hojas de estilo CSS.

1. Escribe varias hojas porque las diferentes páginas de su sitio web requieren diferentes definiciones CSS. O al menos no todos requieren todas las definiciones CSS que requieren otras páginas. Entonces divide los archivos CSS para optimizar las hojas que 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 para que sea más fácil mantener el archivo CSS grande, los divide en múltiples archivos CSS.

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

Por la segunda razón, la @importdeclaración aparece como la más útil porque obtienes múltiples archivos CSS pero los archivos cargados son siempre los mismos.

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

Use @import en su CSS si está usando 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 al escribir código para múltiples dispositivos. Incluya una declaración condicional para incluir solo el estilo del dispositivo en cuestión, luego solo se carga una hoja. Todavía puede usar la etiqueta de enlace para agregar elementos de estilo comunes.

Experimenté un "alto pico" de hojas de estilo vinculadas 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, tuve un bloqueo / desaceleración. Y el ejemplo de código correcto es:

@import 'stylesheetB.css';

Por lo tanto, me resulta útil para tener un buen mapa mental, como mencionó Nitram, mientras sigo codificando el diseño. Buena suerte. Y perdón por 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 la velocidad de la 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 STYLE en el encabezado HTML de su página
• Nunca use CSS @import o archivos CSS separados para entregar CSS a menos que tenga una gran cantidad de código o exista una necesidad específica.

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

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

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

La siguiente función eliminará los comentarios y minimizará los pasados ​​en CSS. Se empareja 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ás a esta función en el encabezado de tu 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 de su documento. Pasar en una matriz con los nombres de sus hojas de estilo con su paso IE: css/styles.css. No es necesario agregar la extensión, .cssya 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>