@import vs link

Question

Primero sé que el título dice que es una pregunta duplicada como here, here y here. Todo lo que leí sobre este tema tiene más de dos años. Mucho ha cambiado en ese período de tiempo, así que ¿son los mismos pensamientos aún aconsejables?

Aquí hay un ejemplo, utilizo @import dentro de una hoja de estilo para traer mi restablecimiento de CSS y un par de otros estilos. ¿Debo cambiar eso de @import a <link>? De acuerdo con este article debo usar el enlace. Así que pregunto a otros desarrolladores, ¿cuál es la mejor manera de fechar (25 de agosto de 2011)

Answer 1

No mucho o nada ha cambiado en el último año o dos, y todavía estamos lidiando con mucho de lo mismo navegadores desde entonces, por lo que no debe cambiar su práctica.

<link> es preferido en todos los casos más de @import, porque este último bloquea las descargas paralelas, lo que significa que el navegador esperará a que el archivo importado termine la descarga antes de comenzar la descarga del resto del contenido.

Esto se puede ver en gran detalle aquí:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Así, mientras que @import puede ser conveniente, eso es todo lo que ofrece. Si realmente quiere aprovechar tiempos de carga rápidos, use la cantidad mínima de hojas de estilo (probablemente una en la mayoría de los casos), escriba un buen CSS con selectores eficientes (lo habitual), minítelo y use una etiqueta <link>.

---

Este iba a ser un comentario, pero se hacía demasiado largo:

En lugar de @import (sé que es muy conveniente), usted debe combinar los archivos en uno solo cuando su sitio va en vivo . No deberías estar ajustando en ese punto de todos modos, y hay una serie de herramientas para ayudar a minimizarlo. Personalmente, usando PHP, tengo un archivo de configuración donde defino todos los archivos CSS que se escriben en un archivo CSS separado (el que mencionaré en la etiqueta <link>), luego, si la versión almacenada en caché es antigua (ya sea manual o automáticamente)), los combina/minimiza y escribe el contenido en el archivo "caché", y devuelve una cadena de consulta de marca de tiempo para anexar al nombre del archivo CSS para forzar una nueva descarga.

Si también está utilizando PHP, recomiendo cssmin, puede analizar hojas de estilo para @import y extraer el contenido en un archivo, así como manejar todos los aspectos de la minificación.