el holgazán

Algunas de las mejores prácticas de trabajo con hojas de estilo CSS:

1. Empezar con una página de contenido en blanco.
Una vez que se tiene el diseño, preparar los contenedores para la cabecera, la navegación, un ejemplo del contenido, el pie de página, etc. Después empezar a incluir el resto del HTML. Finalmente añadir los estilos CSS.

2. Lo primero: resetear los estilos CSS.
Eliminar los valores por defecto que define cada navegador, para minimizar las diferencias entre navegadores.
Normalmente margin y padding:

* {
padding:0;
margin:0;
}

Ver también las siguientes propuestas:

• "Reset reloaded" en meyerweb.com.
  
• "The most useful CSS technique" en crucialwebhost.com.

3. Organizar las hojas de estilo en un único master.
Para facilitar el mantenimiento futuro, podría definirse un master.css de este tipo:

@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

De forma que sólo sea el master el que se incluya en las páginas:

<style type="text/css" media="Screen">
/*\*/@import url("css/master.css");/**/
</style>

Ver otras recomendaciones relacionadas en "10 CSS Tips from a Professional" de 72dpiintheshade.com.

4. Disponer de una librería de clases CSS útiles para depurar.
Esta librería no forma parte de la entrega final, pero es útil para depurar, introduciendo múltiples clases de la forma:

<p class="floatLeft alignLeft width75">...</p>

Ejemplo de librería:

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

5. Organizar cada hoja de estilos en apartados y bloques.
Dividir el código en secciones, por ejemplo: Globales (body, párrafos, listas, etc.), Cabecera, Estructura de página, Títulos, Estilos de texto, Navegación, Formularios, Comentarios, Extras, etc.
Es conveniente comentar e indentar adecuadamente cada sección.
También se aconseja ordenar alfabéticamentes las propiedades CSS al definir cada estilo.

Ver otras recomendaciones en "5 Tips for Organizing Your CSS" en erraticwisdom.com.



Muchísima más información sobre mejores prácticas con CSS en smashingmagazine.com.