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.
