Las estructuras simples no existen con CSS

Cuando escribo una hoja de estilo en cascada o CSS a menudo me encuentro que, si bien existen estándares sobre los elementos que la forman, no existe casi ninguna recomendación sobre su estructuramiento, jerarquía, etcétera...

A menudo pasa que vas añadiendo apaños, quitando y poniendo y lo que en principio era una hoja de estilos simple se vuelve compleja y sobretodo difícil de leer...

La verdad es que no estaría mal compartir consejos sobre cómo mejorar este punto que a veces convierte lo que debería ser un apaño puntual en un infierno...

Antes de nada, destacar que nada de lo que digo a continuación lo he puesto en SigT, más que nada por falta de tiempo y/o ganas (ya se sabe: los proyectos o se hacen siempre con la mitad del tiempo necesario o no se hacen... al menos en España).

Crear una jerarquía: separación en ficheros "temáticos"

Lo más difícil es decidirse por un patrón a seguir, tendemos demasiado a juntar pegotes: ahora el contenedor del sidebar, ahora los estilos de dicho contenedor, luego los estilos de tags de texto (<p>, <acronym>...), etcétera.

Una buena solución pasa por dividirlos en distintos ficheros: por ejemplo un style.css que importe los ficheros CSS:

• screen.css: el cuerpo (body) y contenedores para el diseño o layout para la pantalla, lo típico: cabecera, contenido, menú, pie de página. Solamente aquello que sea de estructura (margenes, anchos, altos, etcétera).

• content.css: el contenido y las reglas especificas del mismo, tales como div#sidebar a:hover { } o div#footer blockquote strong { }. Con éste y el screen.css se forma el diseño final.

• hacks.css: hacks específicos para ciertos navegadores. Éste último en lugar de cargarse con @import debería cargarse vía PHP si el navegador es el que va a usar los hacks...

Con esta división podemos por ejemplo aprovechar el contenido cacheado de content.css y una versión alternativa del screen.css para la impresión.

También, entiendo que el usar varios ficheros pueda ser más una molestia que una ventaja, en ese caso pasamos a otra idea a la que he llamado modelo DEC (Diseño-Etiquetas-Compuesto).

Jerarquía: modelo DEC

El modelo DEC es básicamente lo anteriormente dicho pero teniéndolo todo en un mismo fichero: primero lo específicamente de diseño, luego las etiquetas que forman XHTML definidas de forma estándar y luego las excepciones que son etiquetas a aplicar en ciertas partes del diseño (compuesto). Un ejemplo de la estructura con un diseño típico de los de WordPress:

/* Diseño */   
body {}   
div#wrap {}   
div#content {}   
div#sidebar {}   
div#footer {}

/* Etiquetas */   
a {}   
a:hover {}   
a:visited {}   
abbr {}

/* Compuesto */   
div#content a {}   
div#content abbr {}   
div#sidebar ul li {}

.clear { clear: both; }   
.especial {}

/* Reglas especificas para hacks... */

Lo cual nos lleva al siguiente punto, usemos esté modelo, el de ficheros temáticos (o directamente pero ordenados por grupos temáticos más precisos: formularios, contenidos, listas, etcétera...) o el que sea debemos hacerlo en orden alfabético y nos vendrá de perlas tener una lista de las etiquetas XHTML más comunes:

a {}   
abbr {}   
acronym {}   
address {}   
big {}   
blockquote {}   
body {}   
br {}   
button {}   
caption {}   
cite {}   
code {}   
col {}   
colgroup {}   
dd { }   
del {}   
div {}   
dfn {}   
dl {}   
dt {}   
em {}   
fieldset {}   
h1 {}   
h2 {}   
h3 {}   
h4 {}   
h5 {}   
h6 {}   
hr {}   
img {}   
input {}   
ins {}   
kbd {}   
label {}   
legend {}   
li {}   
ol {}   
p {}   
pre {}   
q {}   
small {}   
span {}   
strike {}   
strong {}   
sub {}   
sup {}   
table {}   
tbody {}   
td {}   
textarea {}   
tfoot {}   
th {}   
thead {}   
tt {}   
ul {}

Está organización por orden alfabetico es importante para evitar repetir un elemento y que esté nos cause problemas por estar definido anteriormente. Por no hablar de las redundancias de código...

¿Cual es vuestra receta? ¿Usáis alguna o cómo salga?.