Este es el weblog de Horacio Bella donde se tratan temas relacionados a internet, comunicación, diseño y algunas cosas más. Si lo deseas puedes ponerte en contacto conmigo o seguir lo que voy escribiendo mediante el feed del sitio.

Gran Impetu

Navbar
Fecha del Post
Septiembre 23, 2007 ~ Permalink

Crear archivos CSS más pequeños

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

1 ~ Finaliza la Semana 04 » Marlex Systems #

[…] Horacio Bella publica un Post sobre cómo reducir el tamaño (tanto visual como en peso) de nuestros CSS […]


2 ~ Alejandro Torres #

Magnifico y muy útil “tutorial” :-D
Un saludo ;-)


3 ~ Archivos CSS mucho más pequeños ~ Gran Impetu #

[…] 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 #

[…] 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. […]



RSS ~ Discusión en esta entrada

Puedes seguir los comentarios que se van realizando en esta entrada mediante el feed correspondiente para la misma y también puedes enterarte de todas los respuestas que se realizan en el blog por medio del feed de los comentarios.

Gracias Matt por estos 6,214 favores.



Realizar comentario






Navbar