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;
}








1 — Finaliza la Semana 04 » Marlex Systems
24/09/2007 08:01 am — Responder[...] Horacio Bella publica un Post sobre cómo reducir el tamaño (tanto visual como en peso) de nuestros CSS [...]
2 — Alejandro Torres
24/09/2007 06:02 pm — ResponderMagnifico y muy útil “tutorial”
Un saludo
3 — Archivos CSS mucho más pequeños ~ Gran Impetu
24/09/2007 06:53 pm — Responder[...] Después de estar leyendo un poco más sobre como hacer archivos CSS más pequeños, llegué a un muy interesante artículo de Paul Stamatiou donde muestra una manera de reducirlos mucho más, lo cual al principio vi con ojos un poco escépticos, pero luego de probarlo en algunos de mis diseños verdaderamente me sorprendió. [...]
4 — Hacer que nuestras páginas de Wordpress carguen más rápido ~ Gran Impetu
25/09/2007 11:42 am — Responder[...] En estos días les conté como hacer los archivos CSS más pequeños y con esto lograr que carguen más rapido en nuestro navegador. Ahora, para optimizar más aún la carga de nuestro sitio, podemos hacer que nuestras páginas también esten comprimidas. [...]
5 — Características de um site user friendly » Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards
10/04/2009 11:26 am — Responder[...] Arquivos CSS menores. [...]