soy Kseso y esto EsCSS

La llamada a los estilos y los peligros de @import. No lo uses 31.3.13

Razones por las que no deberías utilizar @import url() para hacer la llamada a las hojas de estilo. Usa link siempre que sea posible.

La llamada a los estilos y los peligros de @import. No lo uses

·Por Kseso ⧉ 31.3.13 ⚑ opinion ✎ 2

Básicamente hay dos formas de hacer la llamada a las hojas de estilos desde el head del documento. Y una de ellas no deberías usarla.

Con la etiqueta <link href> tal que así:


<link href="estilos.css" ...>

O con el elemento <style> para importarlos usando la regla @import:


<<style>
@import url("estilos.css")
</style>

Y siempre que existen varias opciones surge la duda o pregunta: ¿Cuál de los dos métodos es mejor y por qué?.
Y es este caso no hay dudas:

Utiliza la forma <link href> para hacer la llamada a las hojas de estilos. Siempre que puedas.

El orden sí altera el producto

Por qué no usar @import

Si utilizas @import conjuntamente con otras reglas de estilos en el elemento <style> siempre debes colocarla al inicio del todo. Entre <style> e @import no puede haber ninguna otra regla. Si la hay, no se importa la hoja de estilos.

link e @import relacionados

link e @import juntos

Un caso común es encontrarse las dos formas en el mismo documento. Tengamos por ejemplo dos archivos css llamados estructura.css y tipografia.css.
Si se ambos se incluyen con link o con @import no hay problemas en la carga de ambos. Se realizan en paralelo o simultáneamente. Pero si se mezclan los dos métodos:


<link href="estructura.css" ...>
<<style>
@import url("tipografia.css")
</style>

En todos los Internet Explorer, incluido el 9, tienes garantizado que hasta que no se haya descargado todo el archivo "estructura.css" no comenzará la bajada de "tipografia.css". Demora y retraso garantizado.

Link con @import en él

En el caso de utilizar el <link href="a.css" ...> para llamar un archivo css que contiene en él una regla @import url("b.css") para importar una segunda hoja de estilos, ésta segunda hoja (b.css) no comenzará a descargarse hasta no terminar todas las reglas incluidas en a.css.
Y esto sucede en todos los navegadores.

Varios links con @import

Sea el caso:


<link type='text/css' href='a.css'...>
<link type='text/css' href='estilos.css'...>

Y en estilos.css de nuevo la llamada a @import url("b.css")

En este caso todos los navegadores descargan simultáneamente a.css y b.css excepto los IE. En esta familia la descarga de "b" no comienza hasta terminar el "a".

Otras combinaciones

Hay más combinaciones posibles en la llamada a hojas de estilos, como un bloque de varios @import url o múltiples <link href= > en conjunción con la carga de scripts que intervienen en la aplicación de los estilos.

En ellas el uso de @import penaliza y retrasa la carga de la página frente al link.

Estas y otras relaciones entre <style> e @import las tienes analizadas y documentadas en el artículo "don’t use @import" de Steve @Souders. Aunque veterano (años 2009) es plenamente vigente.

Kseso

La llamada a los estilos y los peligros de @import. No lo uses 31.3.13