Contenido

Pon a dieta tus CSS

25 dic

+ 14

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.

  • Magnifico tutorial Andrés, la mayoria de cosas ya las sabia, pero me ha ido bien para recordar, y sobretodo para acordarme que tengo que utilizarlas, porque muchas veces aunque lo sepas por perreria no lo haces :P

  • Muy buen artículo, había cosas que no las tenía del todo claras. Gracias ;-)

  • Un apunte, yo no quitaría sans-serif de la lista, porque es genérico, yo dejaría o bien serif, o bien sans-serif, o bien monospace y esos tipos genéricos que se configuran en el navegador. Por tanto sugiero Verdana,sans-serif

    La sans-serif predeterminada en Windows suele ser Arial, la serif, Times New Roman y la Monospace,Courier New. En GNU/linux es posible que no se tenga Verdana de serie, en los Mac OS tampoco.

    El artículo es muy bueno, enhorabuena.

  • Para el orden de las propiedades del margen me ayuda mucho la palabra TRouBLe como regla nemotéctica para acordarme del orden.

  • Simplemente gracias, estaba leyendo sobre css, pues siempre hay cositas que con el tiempo se olvidan si no se usan… Mil gracias por esos CONSEJOS.

  • hay una regla memotécnica más fácil para acordarse de los márgenes, como un reloj empezando con la aguja en hora en punto

  • Hum, lo siento pero no estoy muy de acuerdo con ese articulo.

    Primero, a consejeria todo el contrario, usar ambas forma compacta y detallada es la mejor forma de ser el mas compatible posible. Esa es mi experiencia personal, no todos los navegador/version de navegador conforman a la especificacion de la misma forma.

    En cuento a reducir el tamaño de los id … vaya, seguro que en dos años te acuerdas todas las abreviaciones. Y cuento de corto es entendible por ti y no por alguien mas ? No es best practice de trabajo en equipo.

  • #8 Tienes razón en lo de los id’s quizas para trabajar en grupo no es la mejor solución, pero como digo en el artículo no es que te vayas a ahorrar muchos bytes con ello asi que para ciertos casos esta “regla” puede ser más elástica.

    En cambio al tema del modo compacto o extendido… nunca me he visto con ningun problema en este estilo. Así que por el momento seguiré aplicandolo :D

    Un saludo y gracias por la puntualización.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.