Uno de los desafíos más grandes que podemos tener al realizar un sitio complicado es estructurar de manera lógica las hojas de estilo para lograr que sean eficientes y permitan su reutilización al máximo posible.
Vamos a ver una forma para intentar lograr esto de manera que tengamos que repetir la menor cantidad de código sacando el mayor provecho.
Dado que las hojas de estilo no tienen una capa de color, la intención es crearnos una própia, organizando el código de forma que la modificación sea lo más rápida y sencilla posible con el mínimo esfuerzo.
Supongamos que tenemos un sitio web, al que queremos dotar de un aspecto distinto dependiendo de la sección en la que nos encontremos.
Nuestro sitio de demostración constará de un simple encabezado y un DIV principal con algunos colores, texto y enlace. Este sería el código:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Estructurando las CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>¡Hola mundo!</h1>
<div id="cuerpo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In justo ante, pharetra at, elementum sed, dictum molestie, leo. Etiam aliquet. Donec pharetra ligula sit amet dolor. In hac habitasse platea dictumst. Integer at erat ac magna molestie dapibus. Maecenas consectetuer, nunc sit amet malesuada bibendum, lacus diam condimentum nunc, rutrum ultrices nulla quam sed massa. Nulla facilisi. Quisque convallis molestie diam. Aenean auctor leo et sapien. Donec nisi. Aliquam mauris.<br />
<a href="segunda.html">A la segunda sección</a>
</div>
</body>
</html>
Esta página la llamaremos “primera.html“. Luego haremos una página idéntica llamada “segunda.html” donde cambiaremos el <h1> y el enlace:
<h1>Segunda página</h1>
y
<a href="primera.html">A la primera sección</a>
Lo primero que deberíamos tener en cuenta es la paleta de colores que vamos a utilizar. Para este caso concreto utilizaré dos paletas, una para cada sección, en tonos azul y naranja.
En ambos casos la apariencia sera idéntica. Solo cambiarán los colores utilizados.
El primer paso es definir los estilos, sin definir ningún tipo de color.
@charset "utf-8"; /* Si utilizamos UTF-8 Signature no es necesario especificar la codificación */
body {
margin: 0;
padding: 2em;
font-size: 88%;
font-family: sans-serif;
}
h1 {
font-size: 1.6em;
margin: 1em;
padding: 0;
}
#cuerpo {
font-size: 1em;
margin: 0;
padding: 1em 2em;
width: 46em;
border-top: 1px dashed;
}
#cuerpo a {
text-decoration: underline;
font-weight: bold;
}
#cuerpo a:hover {
text-decoration: none;
}
A esta hoja la llamaremos “estilos.css“, la pondremos dentro de un directorio llamado “css” y la enlazaremos desde las dos páginas agregando esta línea debajo del <title>
<style type="text/css">
@import url("css/estilos.css");
</style>
Como vemos, tenemos los estilos, pero ningún color. El motivo por el que utilizo el @import en lugar del link habitual es porque de esta manera la hoja de estilos se degrada en los navegadores antiguos (que verán la página sin estilos). Intentar que un navegador antiguo pueda ver correctamente una hoja moderna es, en mi opinión, una pérdida de tiempo.
Antes de pasar al color, dederíamos corregir los errores de IE anteriores al 7. En #cuerpo hemos definido un ancho de 46em con un padding total de 4 (2+2), que hacen un ancho total de 50em. Para que se vea bien en IE <6 deberíamos corregir el ancho total. Así que hacemos una nueva hoja de estilos llamada estilosie6.css y ponemos lo siguiente:
@charset "utf-8";
#cuerpo {
width: 50em;
}
Y ponemos la nueva hoja de estilos con un comentario condicional por debajo de la anterior, pero fuera del <style></style>, tanto en la primera como en la segunda página:
<!--[if lte IE 6]>
<link href="css/estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Si quisieramos hacer unos estilos específicos para la primera página, podríamos hacer otra hoja de estilos. Para no complicar el ejemplo vamos a obviar este paso.
Ahora solo nos quedan los colores.
En el caso de los colores seguiremos una lógica distinta. En lugar de asignar propiedades (colores) a los elementos, asignaremos elementos a las propiedades (colores).
Vamos a definir un mismo color para el H1 y los enlaces. Un color para el fondo y otro para el borde del DIV y un color para el hover de los enlaces:
@charset "utf-8";
h1, #cuerpo a {
color: #f90;
}
#cuerpo a:hover {
color: #930;
}
#cuerpo {
background: #fc9;
}
#cuerpo {
border-top-color: #f90;
}
Seguramente algunos os preguntaréis aquí porqué he puesto #cuerpo dos veces, en lugar de ponerlo una sola vez con ambos estilos. Como ya he dicho, se trata de asignar elementos a las propiedades de color, y no a la inversa. Este es un caso muy sencillo, pero si fuese una página más compleja seguramente tendríamos más de un elemento con color de borde similar, por lo que poner más de una propiedad afectaría a todos los elementos. La idea es tener cada propiedad de color una sola vez. De esa forma mantener o cambiar los colores de la página será una tarea sencilla y no tendremos que hacer un buscar y reemplazar en todo el documento.
Guardaremos este documento como “colores1.css” y lo referenciaremos haciendo la llamada debajo del anterior @import, pero solo desde la primera página:
<style type="text/css">
@import url("css/estilos.css");
@import url("css/colores1.css");
</style>
Y ahora toca modificar los colores para la segunda página.
Guardamos el documento “colores1.css” como “colores2.css” y cambiamos los colores de maner acorde:
@charset "utf-8";
h1, #cuerpo a {
color: #33f;
}
#cuerpo a:hover {
color: #009;
}
#cuerpo {
background: #99f;
}
#cuerpo {
border-top-color: #33f;
}
Y solo nos queda referenciar los colores desde la segunda página:
<style type="text/css">
@import url("css/estilos.css");
@import url("css/colores2.css");
</style>
¡Y listo!
Dos páginas con distintos colores pero los mismos estilos. Al compartir hoja de estilos los navegadores utilizarán para la segunda la que tienen guardada en el cache. Solo descargarán la hoja de colores, con el consiguiente ahorro en ancho de banda. Si necesitamos que tengan alguna diferencia, como se había mencionado antes, utilizaremos una hoja de estilos distinta con las “excepciones”, de forma que los estilos compartidos estén siempre en una misma hoja y podamos aprovecharnos del cache del navegador.
Y si mantenemos la lógica de agregar elementos a las propiedades en la hoja de color la hoja de estilos será mucho más corta y sencilla de mantener, ya que no repetiremos propiedades.
Espero que este método os sirva para mantener esos sitios complejos y con distintas secciones, que tantos dolores de cabeza suelen traer. Este método también es ideal para hacer distintos “skins” de un sitio.
Hasta otra.
4 Respuestas a “Tutorial: Estructurar las CSS en capas”