Cristalab

Estás en: Cristalab > Tips > Cómo reducir el peso de los archivos de estilos CSS

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

Por: RattaMono + 16.01.2008

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:


#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.

Etiquetas css

Comentarios | Enviar un comentario
Hasta cierto punto esta bien, pero todo en una sola linea Shock

Buen tip Thumbs up, algunas cosas no las sabia.
Por: Dientuki
buen tip rattaMono Sonrisa, te añadiria este link que comprime el CSS a tal punto que la legibilidad es nula, pero reduce tamaño..
cleancss

salu2
Por: Zandy
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: Webramientas_blog
Muy buen tip RattaMono.
Por: Carloz.Yanez
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: egoman _blog
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: Fercho_blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.