Velocidad / redundancia de selectores en CSS [cerrado]

Question

¿Alguien tiene información sobre las velocidades del selector de navegador en CSS? En otras palabras, cómo se comparan los diferentes selectores entre sí (en el mismo navegador).

Por ejemplo, a menudo veo (y escribo) códigos como este:

#content #elem { ...rules... }

Pero como esos elementos son ID únicos, solo debería necesitar #elem , ¿verdad? Esto me hizo pensar en si tal vez sea más rápido para los navegadores tener selectores más complejos, mi pensamiento es que un navegador podría encontrar #content y saber solo buscar en ese elemento, no en ningún otro lugar.

Otro ejemplo podría ser table tr td .class vs table .class

Answer 1

Para ser honesto, estás hablando tan poco tiempo que no creo que realmente haga una diferencia.

En cuanto al uso de selectores más específicos, creo que esta es una buena práctica por un par de razones:

1. Mejora la legibilidad del código: de un vistazo puede ver más en qué lugares se aplican los selectores en relación con el HTML.
2. Reduce la probabilidad de que sus selectores se sobrescriban en otro lugar, ya que se habría escrito un selector con aún más especificidad, lo que es muy poco probable que suceda.

Lo que estás hablando puede hacer una diferencia al usar bibliotecas de JavaScript como jQuery, ya que tienen que analizar todo el documento por sí mismos, pero ciertamente nunca he notado ninguna diferencia de velocidad.

Answer 2

Aquí hay información que obtuve después de una búsqueda rápida.

Answer 3

Podría haber una diferencia en la velocidad pero no se percibe en ningún caso de uso normal. La verdadera razón para escribir tu CSS así es la especificidad. Eso es si tienes

#content #elem {color: black;} 

y

#elem {color: red;}

El elemento debe ser de color negro ya que esa es la regla más específica.

Answer 4

No es un tipo inteligente, pero el tiempo que le llevó escribir esa pregunta probablemente exceda la suma de todos los ahorros de tiempo de todos los usuarios que visitarán su sitio (en relación con #id # id2 vs # id2) . También el tiempo para escribir esta respuesta ....

puedes votarme ahora :)

Answer 5

las pautas de Mozilla pueden ser interesantes.

Answer 6

1. Siempre hay alguna opción entre eficiencia y legibilidad. Por supuesto, table tr td .class es más legible, pero muy ineficiente y se puede simplificar. ¿Ha visto algún lugar (suponga un marcado válido) tr sin table o td sin tr ? Al menos puedes comentar parte redundante como:

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. Algunas veces, como otros mencionaron, necesitas una especificidad adicional, por ejemplo. su #elem debería estar rojo en todas partes, excepto cuando se encuentre en el contexto específico de #content .

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }