El rendimiento también existe en CSS

La optimización del CSS es un factor más a tener en cuenta para mejorar el rendimiento de un sitio Web. Sin embargo en muchas ocasiones es poco cuidado.

A continuación algunos tips imprescindibles para entender el rendimiento del CSS.

De derecha a izquierda

Una de las cosas más importantes sobre cómo los navegadores leen los selectores CSS.

#main-nav ul > li a { ... }

En este caso se buscarán primero todos los selectores "a" que estén en un "li" y que además estén en una "ul" que tenga como "id" main-nav.

Lo más eficiente, los selectores ID

Existen varios tipos de selectores como ID, class, tag y universal. Este es el orden de cómo de eficiente son:

#main { ... }

.slide { ... }

a { ... }

* { ... }

Deja que los ID’s sean únicos

Nunca hagas esto:

a#main-nav { ... }

Los ID’s son únicos. Haciendo esto desaprovechas la eficiencia del selector ID.

OOCSS al poder

¡No te repitas!

Crea clases reusables con pocas propiedades y que aporten un valor semántico. De este modo se evita en cierta medida repetir propiedades, lo que supone una mejora de rendimiento.

.text { font-family: Lato; } 

.grey  { background: lightgrey; }

.padding_small { padding: 4px; }

<button class="text grey padding_small">Go!</button>

Existe CSSCSS un estupendo proyecto que analiza la reduncia.

Busca un equilibrio

No penalizes la semántica por el rendimiento del CSS.

De nada sirve un CSS en base a selectores ID’s con nombres sin sentido y que va a ser muy complicado de mantener y escalar. Es preferible penalizar un poco el rendimiento y tener clases semánticas reusables y muy fáciles de mantener.

Y bueno, como todo en este blog está abierto a correcciones y aportaciones.