Trabajando con CSS: Organizar hojas de estilo, entender su jerarquía y hacer tu sitio responsive

Cada maestrillo tiene su librillo y como a mí me resulta particularmente útil echarle un vistazo al de los demás, no voy a ser menos y voy a dejaros husmear en el mío.

Hace ya más de un año escribí un par de entradas en este blog sobre cómo organizar (tagear) adecuadamente una web HTML5. Entonces di también unas directivas CSS pero, por aquello de no complicar mucho el tema, en los ejemplos, embebí el estilo en la cabecera de la propia página. Ahora voy un paso más allá y me meto de lleno en explicar cómo organizar la apariencia de una web con hojas de estilo en cascada.

Hoja de estilo CSS
Extracto de una hoja de estilo

La plantilla web creada para explicar todo esto es un ejemplo de cómo trabajar con las hojas de estilo CSS con un cierto orden. No es un dogma, es simplemente la forma de hacer las cosas que he elegido y que comparto. Para sacarle el mayor provecho, aconsejo leer el código fuente tanto del HTML (que ya os sonará de los ejemplos anteriores) como de los CSS adjuntos, pues he ido comentando aquellos detalles que considero cruciales para entender esta forma de trabajar y, de rebote, para comprender ciertos conceptos sobre las hojas de estilo en cascada y cómo se les puede sacar partido para adaptar una web de escritorio a dispositivos con pantallas más pequeñas.

De cualquier forma, dejo aquí algunas notas interesantes para que sepáis qué os vais a encontrar.

Importando hojas de estilo

Por lo general, siempre termino trabajando con muchos archivos CSS diferenciados de manera que cuando quiero cambiar un elemento específico, por ejemplo del menú de una web, voy directamente a menu.css y no me mareo mucho buscando. Es una comodidad para mí hacerlo de esta manera.

El problema de esta forma de trabajo es que, para una única página web, hay que cargar a lo mejor 7 hojas de estilos… Mi solución: A fin de tener el menor número de llamadas a CSS posible en la cabecera de la página, me gusta usar una hoja de estilo en la que importo las demás necesarias (ver actualización al final de la entrada) y, ya, si alguna página del site necesita un CSS más específico, lo llamaré desde su <head> para que no se cargue innecesariamente antes de tiempo.

Esto me deja, en el mejor de los casos, una única llamada a CSS en el <head> de cada página.

HTML

<link rel="stylesheet" href="css/estilos.css" type="text/css" media="screen, projection" />

Y las demás hojas necesarias, se cargarán dentro de ese CSS:

CSS estilos.css

@import 'reset.css'; 
/* Sirve para evitar conflictos mayores entre el HTML5 y los exploradores antiguos */

@import 'general.css';
/* Donde están definidos los estilos genéricos del site (body, links, párrafos...) */

@import 'fuentes.css';
/* Donde se definen las fuentes no típicas que se emplean en caso de usarse */

@import 'otros.css';
/* Así, tantos como necesites, quizá para el menú, la cabecera, el pie de página o los anuncios */

Haciendo nuestra web responsive

En este mismo CSS, importo también los estilos necesarios para hacer la página web responsive (sensible a dispositivos con pantallas pequeñas).

CSS estilos.css

@import url('mov.css') screen and (max-width:420px); 
/*  de esta forma, indico que sólo se use "mov.css" para pantallas con un tamaño máximo de 420 píxeles de manera que en este CSS aplicamos los cambios necesarios para que la web se muestre correctamente en pantallas pequeñas */

@import url('tab.css') screen and (min-width:421px) and (max-width:900px);
/* y así, le digo que "tab.css" se use para pantallas mayores de 421 píxeles, pero menores de 900... para todo lo demás, se aplicarán los estilos generales */

Sin olvidar poner, dentro del <head> del HTML, la referencia de tamaño para que móviles y tabletas interpreten correctamente estas órdenes.

HTML

<!-- [Referencia de tamaño necesaria para móviles y tabletas] -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Prestando atención a la jerarquía

Hay que tener cuidado con el orden de importación: Las hojas de estilo en cascada conceden mayor importancia siempre al último estilo llamado, es decir, los importados más abajo priman sobre los de arriba, siempre que no se especifiquen excepciones como en el caso del tamaño de pantalla de tablets y móviles.

En el ejemplo explicado, si hay alguna definición de estilo repetida en otros.css, ésta prevalecerá sobre las que estén en reset.css o general.css. Si os descargáis los archivos o miráis el código fuente de la demo, creo que lo veréis mucho más claro.

Archivos para descargar

Finalmente, los enlaces a la DEMO y a la DESCARGA de los archivos.

Actualización (abr/2014)

Aunque ésta resulte una forma más ordenada y limpia de presentar la información, es preferible no utilizar el recurso @import para añadir CSS porque penaliza a la carga de la web, saber más.

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.