5 técnicas para mejorar tus hojas de estilo CSS

Recopilación de 5 consejos para que las hojas de estilo de un proyecto sean más útiles.

5 rules to Write More Readables CSS Files

Son las siguientes:

1. Ordenar los elementos de la hoja alfabéticamente.
2. Anidar y tabular los elementos relacionados. Tipo #nav, #nav ul, #nav ul li, etc.
3. Añadir bloques de comentario para aclarar cada parte.
4. Tabular las propiedades de cada elemento, para añadir espacio y legibilidad.
5. Agrupar los elementos que tienen propiedades comunes, redefiniéndolos sólo para las propiedades distintas. El ejemplo del original es muy clarificador:

.icon-facebook {
  background:url(facebook.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-twitter {
  background:url(twitter.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-delicious {
  background:url(delicious.gif);
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}

Lo cambiaríamos por

.icon-facebook,
.icon-twitter,
.icon-delicious {
   padding-left:  26px;
   margin-right:  20px;
   width:        100px;
}
.icon-facebook{background:url(facebook.gif);}
.icon-twitter{background:url(twitter.gif);}
.icon-delicious{background:url(delicious.gif);}

Es más sencillo actualizarlo de ese modo.

Por último, Antonio Luppeti, el autor, recomienda también un par de utilidades para crear una versión comprimida de la hoja de estilos, una vez que hayamos terminado con ella. De ese modo mejoraremos la velocidad general del sitio web.

Foto tomada de Flick. Steve McOrmond.