El Principio
Desde que comencé a utilizar CSS, hace ya algunos años, he buscado formas más eficientes de estructurar las hojas de estilo. En el principio todo se reducía a una hoja de estilo (normalmente llamada principal.css,main.css o diferentes variantes) que internamente estaba organizada de modo que las definiciones de elementos de HTML (body, p, h1…h6, etc.) estaban al principio, luego los IDs y finalmente las clases.
Aparece CSS 2
En algún momento, mientras comenzaba a incorporar elementos de diagramación y posicionamiento, las hojas se hicieron cada vez más complejas. La organización interna se hacía gradualmente más difícil de seguir y determinar los pesos de cada elemento en la cascada resultaba una tortura.
A la vez descubrí el potencial de CSS para generar opciones para distintos dispositivos de salida y comencé a incluir print.css, en la que desde entonces defino el estilo de impresión importándola con el atributomedia="print".
La Separación
El siguiente paso fue bastante lógico: separar el archivo principal en dos. Uno manejaría los aspectos básicos de estilo para los elementos de HTML, esencialmente fuentes, colores y tamaños. El otro se encargaría de la definición de elementos de diagramación y posicionamiento. De este modo se generaba una situación en la que la primera hoja, que seguía llamándose main.css, contenía casi exclusivamente CSS 1, y la segunda hacía fuerte uso de CSS 2. Esta estrategia inicial tenía mucho sentido para aislar a browsers antiguos como Netscape 4.x, más aún si lo combinabamos con el hack @import que éste no reconoce, por lo que esas definiciones de estilo le resultan invisibles, pero el usuario puede de todos modos acceder al contenido sin estilo, o al menos parcialmente estilizado. Esto es lo que llamamos degradación positiva o graceful degradation.
En ese momento ya coexistían tres archivos de estilo, main.css, layout.css y print.css. Con el uso y el tiempo surgió la necesidad de modularizar aún más esto y nacen hojas como forms.css para manejar exclusivamente los elementos de formularios.
Nace el Color
Actualmente estoy yendo un paso más allá: para agregar una capa adicional de abstracción o separación, estoy utilizando una hoja llamada color.css, en la que defino sólo los colores. Cuál es la ventaja? Sencillo, si quiero o necesito modificar la paleta completa de colores de un sitio, sólo tengo que modificar color.css. Esto facilita la tarea de proveer diseños alternativos, realizar actualizaciones rápidas e incluso modificar plantillas prearmadas para propósitos específicos, personalizándolas con colores propios.
Modularización
El concepto clave detrás de toda esta estrategia de manejo de estilos es la modularización: agrupar los elementos comunes y aislarlos de los demás para conformar estilos pequeños, fácilmente manejables y altamente reutilizables. Estos son conceptos prestados de programación, pero resultan sumamente apropiados en este contexto.
La modularización de los estilos no sería lo mismo sin una cuidadosa estrategia de manejo de CSS. Mi técnica favorita consiste en vincular sólo una CSS externa en el HTML mediante el elemento link:
<link href=”styles/main.css” rel=”stylesheet”
type=”text/css” />
De este modo el HTML permanece limpio y efectivamente separado de la presentación. Las demás hojas se vinculan desde el archivo main.css:
@import URL(“layout.css”);
@import URL(“forms.css”);
@import URL(“color.css”);
@import URL(“print.css”) print;
Esto último tiene una flexibilidad enorme: puedo agregar o quitar hojas de estilo sin siquiera modificar el HTML, porque éste siempre vincula sólo a main.css, lo que allí ocurra es harina de otro costal.
