Tal vez no sea mucha, pero existe  una diferencia entre cargar en el navegador un archivo CSS de 5kb y uno de 25kb. Los dos archivos pueden generar el mismo estilo y el peso excesivo se debe muchas veces a una escritura poco ahorrativa.

Podemos reducir notablemente el tamaño de nuestro CSS eliminando algunos caracteres demás. Así también podremos tener nuestro archivo mucho más organizado. A continuación, algunas maneras de reducir su tamaño.

En la forma de escribir los comentarios podemos reducir bastante espacio, por ejemplo, pasando del primer ejemplo al segundo:

/*--------*/
/*--Comment--*/
/*------–*/

/*Comment*/

Algunos códigos de colores, en los cuales se repiten los caracteres, pueden ser escritos de manera corta, tal como se hizo en el segundo ejemplo:

color: #ffffff;
color: #ff88ff;
color: #f8f7f2;

color: #fff;
color: #f8f;
color: #f8f7f2;

Muchas veces, a medida que vas codeando un diseño, agregarás un padding derecho y a los 10 minutos agregarás un padding inferior, por lo que las propiedades te quedarán en distintas líneas. Conviene usar el método en que se agrupan. Ver las diferencias entre los dos ejemplos:

padding-left:10px;
padding-right:20px;
padding-top: 0;
padding-bottom:30px;

padding: 0 20px 30px 10px;

Cuando el padding o el margin derecho sea igual al izquiero y el inferior igual al superior puedes usar la suguiente forma:

padding: 5px 10px;

Cuando los valores sean 0, puedes evitar usar las unidades de medida, por ejemplo:

margin: 10px 0px 0px 0px;

margin: 10px 0 0 0;

Algo que también puedes hacer es acortar los nombres de los selectores, por ejemplo cambiar “HeaderMiddleLeft” por “HeaderML”. Esto puede ser algo engorroso si la hoja de estilo se utiliza entre varias personas, pero si es para uso privado en recomendable.

Además puedes agrupar elementos con las mismas propiedades. Sería algo así:

h1{
margin:0;
padding:0;
}
 
h2{
margin:0;
padding:0;
}
 
h3{
margin:0;
padding:0;
}

h1, h2, h3{
margin:0;
padding:0;
}