Hace unos meses explicaba por este mismo blog cómo organizar la apariencia de una web con hojas de estilo en cascada y, aunque aparentemente, la organización que comentaba quedaba ideal de la muerte (así como todo muy clarito y bien ordenado) al final resulta que es una solución de la muerte, para nada ideal.
El problema está en que, en aquella ocasión, yo hacía hincapié en que era mucho más práctico tener una única llamada a la hoja de estilo en la cabecera de la web cargando los demás CSS dentro de otro y abusando de las posibilidades que brinda @import
como solución limpia y ordenada. Pero en la práctica este caso penaliza el rendimiento de la web y, por lo tanto, se desaconseja su uso.

Depurando código
Rehago pues la plantilla web creada para explicar aquello y compongo una nueva llamando a una única hoja de estilo desde la cabecera de la página web. Podéis husmear en sus entresijos, que para eso está: DEMO en vivo y DESCARGA de los archivos.
Como podéis ver en las capturas de pantalla que ilustran esta entrada, la versión que utiliza el recurso @import
obtiene peores resultados en el test que Google pone a disposición de los desarrolladores (y cualquiera con interés) que esta nueva versión que no lo usa. Esto se debe al tiempo que tardan los exploradores en interpretar las distintas llamadas: aquellas hechas mediante @import
se leen una a una, mientras que las integradas en el <head>
de la web pueden ser descargadas a la vez. Google lo explica mejor, pero en inglés.

Fragmento de HTML del <head>
Igualmente, dejo aquí en código los cambios esenciales que os vais a encontrar respecto a la versión anterior.
<!-- [Estilo CSS] --> <!-- A fin de mejorar el tiempo de carga de la web, hago desde aquí todas las llamadas a hojas de estilo evitando utilizar @import dentro de las mismas. Sólo una llamada en este caso... --> <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen, projection" /> <!-- [Referencia de tamaño necesaria para móviles y tabletas] --> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Por supuesto, el ejemplo viene comentadísimo (más que esta vista rápida) y con la estructura y los espacios adecuados para que no resulte una tortura leer su código fuente, que es de lo que se trata. En el momento que esto tuviera que ser llevado a una web-no-de-ejemplo, debería ser adecuadamente minificado.
¿Opiniones, dudas? Cuéntame…