Blog what I write

Optimizar CSS, 12 consejos y 4 herramientas

post - - 3 replies -

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS.

1. Selectores ID, Classes, Tags

#logo { margin-top: 1em; }
.ico { margin-left: 1em; }
a { text-decoration:none; }

Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. En este punto tenemos que pensar de forma creativa y global para usar los selectores de clase, las propias etiquetas y los principios de la cascada.

2. Un identificador no necesita más

h1 #logo { margin: 1em; }

Las etiquetas con un atributo de identificador son irrepetibles, solamente hay uno por página, por tanto es redundante añadir cualquier referencia adicional.
El ejemplo anterior más optimo sería:

#logo { margin: 1em; }

3. Agrupar selectores con mismas propiedades

En vez de:

h2 { font-weight: 700; }
h3 {  font-weight: 700; }
.bold { font-weight: 700; }

Mejor usar:

h2, h3, .bold { font-weight: 700; }

Este es un ejemplo muy obvio pero puede ser más complejo dependiendo del tamaño de la hoja de estilos.

4. Escribir el CSS de formas abreviada

Las llamadas Shorthand es una forma de escribir las reglas de forma abreviada, lo cual repercute directamente en la optimización (siguiendo el principio menos es más).
Este asunto lo he tratado en un post anterior llamado “Formas abreviadas para optimizar CSS“.

5. Más restrictivo a la derecha

ul li span.linklist a { border: 1px solid red; }

Ante un ejemplo como este podemos pensar que el navegador interpreta de izquierda a derecha los selectores, cuando en realidad es justamente a la inversa. Primero analiza A, luego mira que se su padre sea SPAN.linklist, su abuelo LI y su bisabuelo UL, si esto se cumple se pone la propiedad de estilo border: 1px solid red;.

El problema es que pueden existir muchas etiquetas de enlace en una página y la cantidad de proceso será mayor, por lo tanto tendríamos que poner el selector más restrictivo más a la derecha. Ante esto se me ocurren dos soluciones:

  • Disminuir las descendencias, por ejemplo: span.linklist a
  • Otorgar una clase a.linklist y prescindir del resto

6. Menos descendencia y más herencia

Es aconsejable no recurrir a selectores con descendencias, hijos, hermanos, etc. Siempre que sea posible usar únicamente Selectores ID, clases y etiquetas.

En cambio si es positivo heredar (inherit) el mayor número de propiedades posibles entre diferentes elementos. Tengamos en cuenta también la herencia por defecto para no escribir reglas redundantes.

7. Poner el CSS en HEAD

El situar los estilos en el HEAD hace posible que la página muestre el contenido-estilo de forma progresiva, lo que mejora la experiencia de uso.

Por otro lado la especificación HTML también recomienda la etiqueta LINK dentro del HEAD para incorporar nuestras hojas de estilo.

8. CSS como fichero externo (style.css)

Esto hace que la cache pueda hacer su trabajo, de lo contrario si incorporamos el CSS en linea, será descargado una y otra vez con la página.

Otra ventaja es la mejora en la escalabilidad pudiendo gestionar todos los estilos y el diseño de una forma más centralizada.

9. LINK mejor que @import

En algunas versiones de IE usar @import es parecido a usar LINK fuera de HEAD, por esta razón y teniendo en cuanta lo dicho anteriormente, es recomendable usar un enlace al fichero y no importarlo.

Más información en Don’t use @import.

10. Minimizar el número de peticiones LINK

Supongamos el siguiente ejemplo:

<link rel="stylesheet" href="style1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style2.css" type="text/css" media="screen" />

En el fichero style2.css a penas hay unas pocas lineas de código y su gestión no lleva a confusiones, entonces es mejor tener un solo fichero style.css con todas las reflas CSS, reduciendo el número de peticiones LINK al servidor.

En este sentido tener en cuanta también la modularidad, pueden existir ficheros CSS que por esta razón es mejor mantenerlos bien separados y organizados.

11. Evitar las “CSS Expressions”

No son estándares y se procesan repetidas veces para establecer sus propiedades dinámicas.
En No me gustan las CSS Expressions planteo algunos problemas que derivan en la falta de optimización.

12. Evitar filtros

Siempre que sea posible evitar el uso de filtros como por ejemplo “AlphaImageLoader“, estos filtros consumen una gran cantidad de memoria para su funcionamiento.

Herramientas para la optimización y compresión

Existen muchas, pero las que más uso son:

Las dos primeras te ayudarán a chequear y encontrar mejores formas de optimización, la tercera se encarga de comprimir el fichero CSS.

La experiencia hace que en cada proyecto tengamos menos trabajo que optimizar e invertir menos tiempo delante de estas herramientas.

Por cierto, ¿se os ocurren más formas para optimizar CSS?

  • lloku

    Muy buen post javi, llevo mi vida peleando con la gente de maquetación sobre el punto 6 (aunque mas que por rendimiento, por que cuando yo quiero tocar algo me vuelvo totalmente loco) sin que me hagan caso XD

  • Seguro que hay muchas más, pero de momento se me ocurren:
    – Haz al menos una hoja de estilos para impresión, ahorrarás tinta y papel a tus clientes.
    – Usa “CSS reset” para poner a cero todos los estilos por defecto. Así siempre tendrás controlados todos los márgenes, tamaños, etc.
    – Utiliza unidades relativas (em’s y porcentajes) en lugar de absolutas (px’s, cm’s) siempre que sea posible. Al menos en las tipografías.
    – Siempre se puede obtener un CSS estándar, sin condicionales ni hacks. Hay muy (pero muy, muy) pocas excepciones, así que trata de evitarlos.
    – Firebug te facilitará muchísimo la vida cambiando los estilos “en vivo” para depurar ese diseño que no terminas de ajustar.
    – No peques de “divitis” (esto es más de HTML). Si has de dar un id a un elemento, éste elemento no tiene porqué ser un div. Mejor que

  • @lloku, entiendo a lo que te refieres, pero… no te metas tanto con el gremio jejeje 😛

    @Rodrigo, estoy completamente de acuerdo con tus consejos, no obstante los veo orientados más bien a estándares y accesibilidad. En cuanto a la optimización me gusta especialmente el que has dado sobre “CSS Reset”. Gracias por tu aportación 😉