¿Hay razones para seguir usando la regla de @import?

Question

Recientemente encontré un uso de la regla @import en Coda.com. Que en realidad están usando para importar la hoja de estilo principal para el sitio, específicamente el formato:

<style type="text/css" media="screen"> 
    @import url(./coda.css); 
</style> 

Qué ocultará las reglas de Netscape 3 y IE 3 y 4. Dado que una herramientas de desarrollo web público principal va a utilizar navegadores modernos, ¿qué otras razones habría para usar esto en lugar de un enlace?

Answer 1

Para el sitio de Coda, me imagino que lo hicieron más por costumbre que por cualquier necesidad técnica.

@import declaraciones dentro de los archivos CSS reales (no en un elemento <style> en HTML) sirven para muchos propósitos, como facilitar el intercambio entre otros archivos CSS. El marco CSS de Blueprint hace esto para que pueda eliminar fácilmente ciertas partes del marco, como las cosas de tipografía o las cosas de la grilla.

Por supuesto, en un entorno de producción, utilizar un montón de declaraciones @import está mal visto porque aumenta la cantidad de archivos que un navegador web tiene que desplegar.

Answer 2

Ninguno. Usar un elemento <link> también tiene la ventaja de deshacerse del FOUC.

EDITAR: Usando @import en otra hoja de estilo (.css archivo) se puede utilizar como un #include en C, pero no hay ninguna razón para utilizar @import en un bloque <style>.

Answer 3

La única razón para usar esta regla hoy es hacer su CSS más modular dividiéndolo en diferentes archivos, como bibliotecas.

Así, mientras que su página podría vincular a una hoja de estilo, que de estilo puede @Import otras hojas de estilo para el rearme, tipografía, etc.

Sin embargo, esto hace disminuir la carga de la página, ya que es sólo más peticiones http secuencial .

Answer 4

Estoy de acuerdo con Andrew. También utilizo las importaciones para dividir mi CSS lógicamente. Personalmente me gusta dividirlos en 4: reinicio, estructura, tipografía, general (bgs/bordes, etc.)

Dependiendo de la persona que lo haga, su estilo y preferencia, los archivos css también se pueden dividir por sección de página. header.css, footer.css etc.

Sin embargo, una cosa extra que hago para evitar las múltiples solicitudes http es tener un proceso de compilación que se fusione (en orden de importación) y comprima los archivos css para la implementación en vivo.

Esperanza esto ayuda

Answer 5

Yo uso un desarrollo modular acercarse a mí mismo, y con frecuencia terminan con más de 10 archivos CSS individuales. Como saben, ese es un número bastante drástico de solicitudes HTTP, por lo que me gusta usar Blender.

Blender es un rubygem que consolida y minimiza cualquier número de archivos CSS en una sola hoja de estilo. También funciona para JavaScript.

Puede definir @media en sus hojas de estilo individuales para que solo sirvan las reglas apropiadas para los tipos de dispositivo correctos.