Evita sobrecargar tus archivos CSS

Tweet

Cuando desarrollamos un sitio en XHTML y CSS seguro que alguna vez te ha ocurrido que al añadir líneas y más líneas terminas con un CSS sobrecargado.

En un primer momento esta manera de organizar tus archivos CSS te puede parecer fea, pero cuando lo piensas te vas dando cuenta que a la larga es más efectivo debido al tiempo que ahorrarás a la hora de localizar los diferentes estilos.

No estoy seguro del porqué pero muchos diseñadores estan empeñados en desaprovechar el espacio en su código, usando un montón de innecesarios saltos de línea. Recuerda que eso sólo lo verás tu y estas haciendo un uso excesivo de ancho de banda. Tambien tu código será más facil de leer puesto que tendrá menos “boquetes”.

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque a algunos les encanta condensar todo, no dejando ningún espacio.

#wrapper {
width:800px;
margin:0 auto;
}

#header {
height:100px;
position:relative;
}

#feature .post {
width:490px;
float:left;
}

#feature .link {
width:195px;
display:inline;
margin:0 10px 0 0;
float:right;
}

#footer {
clear:both;
font-size:93%;
float:none;
}

Todo parece correcto y tu puedes localizar los elementos de una manera sencilla, pero imagina por un momento que tienes unos 200 elementos, cada uno con unos cuantos atributos, te costará muchisimo localizar los elementos deseados.

Por esos motivos para archivos CSS grandes es mucho más efectiva este tipo de organización:

#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer {clear:both; font-size:93%; float:none;}

En OrderedList podemos encontrar un buen ejemplo práctico de esta técnica:

• 307 líneas | Versión reducida
• 1167 líneas | Versión extendida