Consejos para ordenar tu código CSS

Cuando se empieza con el uso de las hojas de estilo en cascada no se presta atención a la forma en la que la estamos construyendo, que estructura le damos. Esto es un verdadero problema para el futuro, cuando quieras modificar algo o por alguna razón no seas tu el que toque la hoja, te volverás o volverás loco al que le toque, ya que no encontrará ninguna lógica por la que guiarse haciéndose el trabajo mucho más pesado y con peores resultados finales.

En el blog erracticwisdom nos dan 5 consejos para construir un CSS más estructurado y robusto. Es curioso como sin haberlo leído antes, yo mismo adopté de forma lógica algunos de los que comentan. Otros los empezaré a usar desde ahora mismo. Paso a adaptar el artículo al español, recomendado encarecidamente que se tenga en cuenta cuando te pongas con tu CSS. Me lo agradecerás en el futuro.

1.- Indenta el código

Ve construyendo el código css añadiendo indentación, una técnica usada en otros lenguajes. Y hazlo de forma lógica, un elemento superior estará situado más a la izquierda y lo que en él se contenga se irá “empujando” hacia la derecha y por debajo de él. Un ejemplo:

[css]
#main_side {
width: 392px;
padding: 0;
float: right; }

#main_side #featured_articles {
background: #fff; }

#main_side #frontpageads {
background: #fff;
margin: 8px 0; }
[/css]

2.- Condensa todo lo posible

CSS permite dar propiedades por separado o esas mismas “resumidas” en una sola línea. Siempre se pone el típico ejemplo de los márgenes:

Mal uso:

[css]
margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px;
[/css]

Buen uso:

[css]margin:5px 0 4px 10px;[/css]

3.- Divide el código en secciones

En un blog por ejemplo contamos con una serie de bloques que se repetirán casi siempre: cabecera, contenido, barra lateral y pie. Dentro del CSS divide la estructura por bloques, usando comentarios para indicar donde empieza y termina:

• Cabecera
• Contenido
• Barra
• Pie

Dentro del CSS crearemos títulos con los comenatrios:

[css]
/*- Cabecera -*/

/*- Contenido -*/

/*- Barra -*/

/*- Pie -*/
[/css]

4.- Hojas de estilos en CASCADA. Aprovéchalo

Como bien dicen en el artículo quizás este sea el punto más complicado. CSS interpreta las instrucciones en cascada, lo que quiere decir que si definimos que por ejemplo la etiqueta H2 no tendrá margen y lo hacemos en la parte superior del documento, así se interpretará siempre, al no ser que lo modificamos en algún cajón inferior. Para que esto resulte tenemos que hacer un planteamiento previo serio: Todos los párrafos tendrán tal tipografía y serán de tal color. Lo definiremos al comienzo con lo que todos los textos de las diferentes partes del sitio tendrán ese estilo, no tendremos que repetirlo una y otra vez.

5.- Usa varias hojas de estilo

En el artículo original además recomiendan algún compresor de CSS para este último consejo, que yo no aconsejo. Pero sí el usar varias hojas de estilo diferentes, no muchas tampoco, podríamos contar por ejemplo con dos. Una para resetear el CSS y poner los estilos “generales” y en la otra crear la estructura.

Enlace: 5 Tips for Organizing Your CSS