CSS: Lo bueno y breve, dos veces bueno

Reciementeme me tope con un artículo que resume el funcionamiento de los selectores css a la hora de renderizar el html. Al procesar el CSS, los browsers leen las reglas secuencialmente, desde arriba hacia a abajo (predecible) y de derecha a izquierda (sorpresa aquí).

Entonces, las reglas excesivamente verbose terminan perjudicando la performance del renderizado, como puede verse en el ejemplo dado en el artículo de css-101 en el que se ve claramente las verificaciones innecesarias que debe realizar el browser con su consecuente impacto en la performance.

/* Recordemos que los ids son unicos*/

/* Mal */
#nav li ul li a#active {
}

/* Bien */

#active {
}

A la hora de aplicar la primer regla, el browser se ve obligado a verificar la validez de la regla secuencialmente, empezando desde la derecha:

  • #nav li ul li a#active | OK
  • #nav li ul li a#active | OK
  • #nav li ul li a#active | OK
  • #nav li ul li a#active | OK
  • #nav li ul li a#active | OK
  • #nav li ul li a#active | OK

Por supuesto existen situaciones donde el uso de selectores complejos es una necesidad, pero para el resto de las situaciones aplicarse al principio KISS es una excelente idea.

Leer más



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>