Cómo reducir el peso de los archivos de estilos CSS

En proyectos enormes, nos encontramos con que nuestros archivos CSS no son 100 lineas, sino 1000 y su peso no es 3KB sino 100KB.

Cada segundo de carga es vital, así que voy a dar unos tips de como arreglar esto. ¿Cual es la base de todo esto? Legibilidad a cambio de tamaño y/o segundos al cargar la página. Es decir, cambiaremos la facilidad de lectura e identación de los archivos .css (algo innecesario con un .css en producción) por un ahorro considerable en el peso de nuestros estilos.

El selector * selecciona todos los elementos.

Este es mi favorito, solo vean:

* {
margin:0;
padding:0;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:12px;
text-decoration:none;
}

Al principio defines las propiedades que la mayoría de las veces pones, y te ahorras ponerlas en el resto del código. ¿Quien no ha definido en millos de etiquetas margin:0 y padding:0?, ¿Quien o ha puesto text-decoration:none, a cada una de las pseudoclases de <a>?

Se pueden resumir las etiquetas en una sola.

Background-image, background-position, border-style, border-color... todas esas etiquetas se pueden resumir en una sola.

#menu {
position:absolute;
background-color:#889900;
background-image:url(menu.jpg);
background-position:top;
background-repeat:repeat-x;
border-color:#000000
border-style:dashed;
font-family:Arial;
font-size:12px;
float:left;
}

Pasa a ser.

#menu {
position:absolute;
background:#889900 url(menu.jpg) top repeat-x;
border:#000000 1px dashed;
font:12px Arial;
float:left;
}

Las etiquetas coinciden sin importar la clase o id.

li.headmenu {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:left;
}
li.menuder {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:right;
}

Pasa a ser:

li {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
float:left;
}
li.menuder {
float:rigth;
}

Se pueden seleccionar diversos elementos separados por comas.

#bg1 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#222222;
}
#bg2 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#333333;
}
#bg3 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#FF9900;
}

Se puede convertir a:

#bg1, #bg2, #bg3 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
}
#bg1 {
color:#222222;
}
#bg2 {
color:#333333;
}
#bg3 {
color:#FF9900;
}

CSS no lee los espacios en blanco.

¿Tengo que explicarlo? Usemos el mismo código anterior.

#bg1, #bg2, #bg3 {position:absolute;width:150px;height:80px;border:#454545 1px solid;}
#bg1 {color:#222222;}
#bg2 {color:#333333;}
#bg3 {color:#FF9900;}

Ahora, aplicamos dos puntos mas:

Se pueden obviar las comillas en la última propiedad de una etiqueta.
Se pueden reducir algunos colores a 3 dígitos.

#bg1, #bg2, #bg3 {position:absolute;width:150px;height:80px;border:#454545 1px solid}
#bg1 {color:#222}
#bg2 {color:#333}
#bg3 {color:#F90}

Ahora nuestra tarea es elegir y poner en una balanza cuanto queremos cambiar a cambio del otro. Si aplicamos todos, nuestro código va a ser una masa sin sentido. Hay que ser sensatos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Por Dientuki el 16 de Enero de 2008

Hasta cierto punto esta bien, pero todo en una sola linea

Buen tip , algunas cosas no las sabia.
Por Zandy el 16 de Enero de 2008

buen tip rattaMono , te añadiria este link que comprime el CSS a tal punto que la legibilidad es nula, pero reduce tamaño..
cleancss

salu2
Por Webramientas el 18 de Enero de 2008

Muy buenos consejos, habrá que acostumbrarse a llevarlos a la práctica.

Como complemento os dejo un post donde se mencionan varias herramientas online que comprimes aún más los archivos CSS:
http://www.webramientas.com/blog/?p=57
Por Carloz el 18 de Enero de 2008

Muy buen tip RattaMono.

Por egoman el 20 de Enero de 2008

tambien pudiste achicarlo mas con lo de la "sobre escritura de parametros"

Código :

#bg1, #bg2, #bg3 {position:absolute;width:150px;height:80px;border:#454545 1px solid;color:#222}
#bg2 {color:#333}
#bg3 {color:#F90}

Por Fercho el 26 de Enero de 2008

Por un tiempo probe poner todo en una solaliena pero en Dreamweaver 8 da problemas en ocaciones es como recociera esa linea ya al poner el cursor te manda a la linea siguiente, cosa que solo me pasa con css y solo cuando pongo todo en una sola linea.
Por Emmanuel el 28 de Agosto de 2009

Estan muy buenos los tips eso si que no me lo sabia y por lo mismo es bueno compartir.
Por rozuja el 25 de Febrero de 2013

Hay algún orden para organizar en una sola linea, o puede ser en desorden?