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 < size="3">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.


Fuente: http://www.cristalab.com/tips/51134/como-reducir-el-peso-de-los-archivos-de-estilos-css