5 tips para mejorar tus archivos de CSS

1. Etiqueta las áreas generales. Esto hará que encuentres mucho más fácilmente el bloque que quieres modificar. Tienes que "comentar" el nombre del bloque, esto se logra poniendo el título dentro de /* el título */

/* -- Header -------------------------- */
#header { }
 
/* -- Contenido ----------------------- */
#contenido { }
 
/* -- Footer -------------------------- */
#footer { }

2. Manten tus bloques agrupados, por ejemplo todos los elementos que vayas a controlar con CSS deben quedar en el mismo bloque y después del elemento padre.

#contenido { }
.contenido h1 { }
.contenido p { }

3. Usa el shorthand, o lo que es lo mismo la versión abreviada del CSS. Hay diferentes sitios donde puedes ver como es el shorthand, aquí pongo una liga a una de las guías de shorthand.

Sin shorthand

#midiv {
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 15px;
}

Con shorthand

#midiv {
font: normal 12px/15px Verdana, Arial, Helvetica, Sans-serif;
}

4. Genera los nombres de las clases y/o divs de forma inteligente, por ejemplo en vez de nombrar una clase .textorojo, nómbrala .alerta, así cuando quieras cambiar el color de la alerta su nombre seguirá siendo util y no tendrás que modificar tus archivos HTML.

Otro caso es si tienes un layout de dos columnas nombra a estas por la función que desempeñan, por ejemplo: #subnav, #contenido en vez de nombrarlas #col1, #col2 porque si las cambias de lugar las confusiones comienzan.

5. No uses altas y bajas en los nombres de las clases o los divs, esto puede hacerte perder mucho tiempo si tienes un archivo de CSS de varios cientos de líneas de código.