Rendimiento selectores CSS
Normalmente cuando hablamos de rendimiento, nos acordamos de Javascript, pero olvidamos el CSS. A veces tan sólo comprimimos el documento para que el archivo sea más liviano. Así como en Javascript influye la forma en que escribimos el código afecta al rendimiento, en CSS ocurre lo mismo. Existen algunas prácticas conocidas como por ejemplo incluir los archivos externos el css usando la etiqueta <link> dentro del nuestro <head>, utilizar estilos de internet explorer que puede generar bucles que hacen la página lenta o usar demasiados estilos en el documento ya que aumentaría el tamaño de descarga.
Pero antes de hablados de cómo escribir selectores eficaces voy a recordar los tipos de selectores que hay:
Selectores de ID
#elemento {}
Este selector se refiere a un elemento único de la página, es decir a un elemento con el atributo id=»elemento», en este caso.
Selectores de clase
.elementos {}
Se refiere a todos los elementos que contienen el mismo nombre del selector. Se usa en este caso el atributo class=»elementos».
Selectores de tipo
p {}
Se refiere directamente a las etiquetas html. En este caso afectaría a todos los <p> de la página.
Selectores de hermanos adyacentes
p + #elemento {}
Selecciona al elemento con la id=»elemento» pero con la condición de la coincidencia de un párrafo anterior.
Selectores de hijo
#elemento > p {}
Esta regla se refiere a todos los elementos descendientes y cuyo padre es un elemento con el atributo id=»elemento».
Selectores descendientes
#elemento p {}
A diferencia del anterior éste se refiere a todos los descendientes del elemento con el atributo id=»elemento» sin condición.
Selectores universales
* {}
Selecciona todos los elementos.
Selectores de atributo
a[href="index.html"]
Se refiere a todos los elementos, a en este caso, que tengan un atributo href con el valor index.html.
Pseudo-clases y pseudo-elementos
a:hover {}
Son selectores especiales y se basan en la información procedente del DOM. Se crearon para hacer referencia a diferentes situaciones del elemento, <a> en este ejemplo. Para saber más recomiendo visitar este enlace.
¿Cuál es más eficaz?
Para los que leemos de izquierda a derecha imaginamos que el navegador se desplaza de la misma forma, por lo que damos por sentado que por ejemplo en la regla
#main_nav li a
el navegador buscará el elemento con la id «main_nav», luego comprobaría los elementos de lista y seguidamente haría lo mismo con los elementos de enlace. Pero no, no ocurre así.
En realidad se desplazan al revés, de derecha a izquierda. Sabiendo esto, entonces lo que ocurre realmente es que primero busca los enlaces de toda la página, seguidamente comprueba si son hijos de un elemento de lista de toda la página y luego comprueba que son además descendientes de un elemento con el atributo id=»#main_nav».
Entonces, a la pregunta: ¿qué rendirá mejor o cuál es la forma más eficaz?
En el ejemplo la mejor forma de escribirla la regla es:
#main_nav a
o asignar una clase a los elementos a
#main .link
Porque nos ahorraríamos la comprobación de los elementos li en toda la página, y el navegador sólo tiene que comprobar si son descendientes de un elemento único con id=»main_nav».
Entonces, ¿cómo escribir selectores eficaces?
Pues utilizando como herramienta el saber que los selectores se leen en el navegador de derecha a izquierda tendremos que valorar cuál sería la mejor forma en cada caso. Pero para facilitar un poco esta labor el desarrollador David Hyatt nos da algunos consejos útiles:
Evite las reglas universales
David Hyatt incluye además los selectores de hermanos adyacentes, los selectores de hijo, selectores de atributo en el mismo saco de reglas universales. Recomienda usar los selectores de id, clase y etiqueta.
No modifique los selectores ID
Si existe el selector id único en la página no es necesario especificar de qué elemento se trata como en este caso nav#main_nav.
No califique los selectores de clase
De la misma forma no se recomienda especificar a qué elemento se refiere una clase como por ejemplo: div.container. Usar en todo caso un selector diferente de la forma .div-container.
Escriba reglas lo más específicas posible
No caer en la tentación de escribir .nav ul li a. Es mejor .nav a, o crear una clase que sea .list-anchor en los enlaces, por ejemplo.
Evite los selectores descendientes
Son los más costosos de procesar en general. Los selectores de hijos es lo que a menudo más necesitamos y son más eficientes.
Evite los selectores de hijos de etiqueta
Intentar no usar selectores del tipo .nav > ul > li > a. Es mejor asociar una clase a los elementos: .nav > .list-anchor.
Cuestione todos los usos de selectores hijos
Esto es sólo un recordatorio para cuando escribimos nuestro código.
Confíe en la herencia
Se trata de intentar usar la herencia y evitar escribir código duplicado.
Conclusión
Personalmente al saber que los selectores CSS se leían de derecha a izquierda en el navegador, me di cuenta que lo hacía mal y tuve que reestructurar mi forma de declarar mis reglas. Espero que a otros, como a mí me ocurrió, este artículo sirva para mejorar o por lo menos cuestionar nuestra forma de escribir CSS.
Me ha parecido un post muy interesante. Tenía entendido que había una manera de escribir CSS de forma más eficaz, así que después de leer esto me ha quedado mucho más claro. ¡Buen aporte!