aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Estamos apunto de entrar en el més que más promesas de adelgazar se hacen, y por ello he pensado que podría desempolvar este borrador con unos buenos consejos para reducir el peso de tus ficheros CSS.

Debido a que el peso de las aplicaciones web cada vez están siendo mayores, más efectos JS, más estilos CSS, más imagenes,… por ese motivo tenemos que diferenciar nuestra aplicación de una hecha con FrontPage. Para ello deberemos optimizar al máximo nuestros ficheros, hacerlos lo más ligeros posibles intentando aplicar el máximo de funcionalidad, y diseño posible.

Aligerando nuestras CSS

Agrupando propiedades 

Una de las facultades que CSS tiene y puede presumir de ello, es la posibilidad de agrupar algunas de sus propiedades en una sola línea, con ello conseguimos ahorrarnos unas cuantas líneas que sumadas a lo largo del fichero nos vendrán muy bien para el resultado final de nuestra aplicación.

#menu {
	margin-top:20px;
	margin-right:5px;
	margin-bottom:10px;
	margin-left:12px;}

Un ejemplo muy claro es cuando aplicamos margin en todas las direcciones a un elementos de nuestro HTML. En este caso estamos aplicando un margin distinto en cada dirección, gracias a las propiedades margin-***, pero CSS dispone de una propiedad que engloba todas ellas, margin.

#menu {margin:20px 5px 10px 12px;} // Margenes distintos
#menu {margin:20px;} //Margenes iguales

En el primer caso estamos resumiendo el ejemplo anterior en una sola línea, aplicando un efecto distinto a cada dirección del elemento. Para ello debemos conocer la posición de los parametros dentro de esta propiedad.

#menu {margin:TOP RIGHT BOTTOM LEFT;}

En el segundo caso, estamos aplicando un margen igual por todas las direcciones del elemento.  Viendo esto podemos entender que si nos dejamos un parametro el navegador cogerá el valor del que hayamos informado. Siendo posible, conseguir cosas como estas.

#menu {margin:20px 5px;}

 Esto nos aplicará un margen superior e inferior de 20px y uno a la izquierda y derecha de 5px. Fácil de recordar y cómodo de usar.

Cortar los colores

Todos hemos usado en alguna ocasión valores hexadecimales en nuestros colores, por ejemplo (#ff6600). Y en esto tambien podemos ahorrar si nuestro valor hexadecimal es una pareja de pares podremos reducir nuestro valor de 6 dígitos en uno de 3. No es que esto nos vaya a reducir en exceso el fichero, pero menos da una piedra.

  #ffffff --> #fff
  #ff6633 --> #f63 

Ten un plan de acción

Tener un plan de acción es lo más importante a la hora de plantearse cualquier meta, en nuestro caso necesitamos planificar lo mejor posible nuestras clases e id’s para aprovechar al máximo el potencial de ambos. Para ello debemos recordar que los id's SIEMPRE han de ser únicos en la página, en cambio las class definen generalmente a un conjunto de elementos de nuestra página.

Partiendo de esta base debemos pararnos a pensar de que manera podemos optimizar nuestro CSS para aprovechar al máximo su potencia, con la finalidad de ahorrarnos líneas de código.

<div class="layout2col">
	<p>Dogs smell.</p>
</div>
<div class="layout3col">
	<p>More about smelly dogs.</p>
</div>
.layout2col {width:400px;}
.layout2col p {
	font: normal 1em/1.2em Verdana;
	color:#333;
	}
.layout3col {width:250px;}
.layout3col p {
	font: normal 1em/1.2em Verdana;
	color:#333;
	}

 En lugar de definir los estilos de los parrafos dentro de las clases layout3col y layout2col, podemos ahorrarnos líneas:

<div id="content" class="layout3col">
	<p>More about smelly dogs.</p>
</div>
#content p {
	font: normal 1em/1.2em Verdana;
	color:#333;
	}
.layout2col {width:400px;}
.layout3col {width:250px;} 

 ID’s, Clases y Nombres de ficheros

En el empeño de minimizar esfuerzo y peso, debemos revisar los nombres que asignamos a nuestro ID’s y clases, con ello reduciremos unas letras que pueden ser buenas a la hora de pulir nuestro CSS. Nuestros ID’s y clases deben ser lo más explicitos posibles sin abusar de las letras.

Esto nos lleva a utilizar abreviaturas de los nombres, pero sin olvidarnos que en un futuro tendremos que editar el código y tenemos que entenderlo fácilmente.

Por ejemplo:

background == bg
header == head
navigation == nav
...

Cambiar directorios

Además del nombre de los ficheros, tambien podemos reducir alguna letras más con el nombre de nuestros directorios, si lo pensamos nos damos cuenta de que no es algo relevante el nombre que usemos para nuestros directorios (generalmente los de imagenes). Yo personalmente intento usar siempre i en lugar de images, ya que para mi es exactamente lo mismo y además más fácil de escribir y ocupa menos espacio.

Piensa en las fuentes alternativas

Generalmente nuestro CSS disponen de líneas aplicando estilos a la tipografía de nuestra aplicación y generalmente definimos fuentes alternativas, esa fuentes que se aplicarán en caso de no estar disponible la definida como principal. En muchos casos podemos obviar que las fuentes Verdana, Arial o Georgia, son fuentes que todos los equipos suelen tener disponibles.

p {font:normal 1em/1.2em Verdana,Arial,sans-serif;} //Versión larga
p {font: normal 1em/1.2em Verdana;} //Version Corta

Personalmente pienso que este punto es muy relativo ya que nunca debemos pensar que esta regla se cumple siempre y estamos dejando nuestra web con un flanco abierto que nos puedes desbaratar nuestro diseño en ordenadores que por X motivos no disponga de estas fuentes. Generalmente pienso que lo que esté en el lado del cliente no se puede controlar así que no sacrificaría las fuentes alternativas por ahorrarme N bytes.

Trabaja con un CSS pero publica otro

Este punto es muy importante, yo personalmente uso un fichero CSS generalmente extendido, que cuando ya obtiene mi aprovación y veo que todo está correcto y en su sitio lo comprimo y lo publico comprimido de forma que me ahorro unos buenos KB en ello. Esto de hacerlo con un solo fichero CSS nos da problemas a la hora de tratar el fichero comprimido, que normalmente estará todo compacto y dificil de manipular.

Asi que si disponemos de una versión extendida y una comprimida, actualizadas, nos será más cómodo trabajar y además tendremos un CSS ligero en nuestra aplicación.

Conclusión

Soy consciente que la mayoría de los «consejos» son para ahorrarnos poco tamaño, pero si los juntamos y pensamos a lo grande esos bytes se convierten en kbytes y esos kbytes en Mbytes, y así ahorramos cierta cantidad de carga a nuestra tasa de transferencia mensual, diaria,… que buena es.