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
