soy Kseso y esto EsCSS

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

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

·Por Kseso ✎ 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.

Demora en la carga link e @import
Demora en la carga link e @import

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.

Artículos relacionados

  1. "don’t use @import". Por Steve Souders
  2. Choose <link> over @import: Buenas prácticas, por Yahoo!
  3. Avoid CSS @import: Recomendación de Google.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso