¿Hay alguna ventaja al usar selectores muy específicos en CSS?

Question

Entiendo que en jQuery, es ventajoso ser más específico al usar selectores para que jQuery no tenga que recorrer todo el DOM para encontrar lo que está buscando. Por ejemplo, $('span.description') es mejor que solo $('.description') si sé que la clase description solo se aplica a los elementos <span>.

¿Es este el caso con CSS, también? ¿Hay alguna ventaja específica para usar span.description { } en lugar de .description { }? Estoy pensando en términos de velocidad, optimización, etc. ¿Estoy guardando el navegador de cualquier trabajo diciéndole exactamente dónde buscar?

Answer 1

Esto es cierto en CSS -

Una buena regla es descender desde el ID más cercano. Los ID se indexan, por lo que su localización es extremadamente rápida. No hay ninguna razón para usar más de uno en su selector.

Google Code- Optimize browser rendering

Este respondió muchas preguntas que tenía sobre el tema incluyendo este uno espero que les sea útil.

Answer 2

Por lo que yo sé, cuán específicos son los selectores para hacer una pequeña diferencia en el rendimiento.

Las dos áreas en las que los selectores más específicos son más útiles, es reducir el riesgo de que no se aplique donde no se quiere y hacer que un selector tenga prioridad sobre otro.

Answer 3

siempre depende de la cantidad de código html y la estructura. Definitivamente es una buena idea usar especialmente ids y selectores apropiados. (es decir, #nav li en lugar de li.nav). Como el navegador primero carga el html y luego aplica el CSS, está ayudando mucho.

Dicho esto, cuando se trata de css puro (sin jquery), la diferencia de velocidad no es hoy en día fácil de distinguir, ya que los motores de renderizado están altamente optimizados, especialmente cuando se trata de aplicar css. Entonces normalmente no debería importar.

Answer 4

Una regla más específica tiene prioridad sobre la regla menos específica, por lo que:

span.myclass {} 

tiene prioridad sobre: ​​

.myclass {} 

(sin importar el orden es en la que se declararon las reglas)

Answer 5

Lea acerca de la especificidad de css, que es la razón más importante para ser más o menos específico con su CSS.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Como el rendimiento del navegador es más o menos un no-tema (a excepción de en jQuery, como se ha mencionado), mi guía es ser específico al que se está controlando precedencia, o cuando se desea hacer algo un poco más legible en tu CSS. Sobre especificar puede dificultar la reutilización de los selectores de CSS y complicar demasiado las cosas.

Editar

Esto parece un poco de un duplicado:

CSS Performance Question