Rendimiento del selector de elementos secundarios CSS frente a la hinchazón de clase

Estoy tratando de aprender a escribir CSS más eficiente, sobre todo porque estoy trabajando con un sitio bastante complejo que necesita renderizar rápidamente.

Estoy acostumbrado a tener mucho de esto en mi HTML / CSS (principalmente porque me gusta la legibilidad):

.spotlight {} .spotlight ul {} .spotlight ul li {} .spotlight ul li a {color: #333;}  

Ahora entiendo que los navegadores ejecutan el proceso de coincidencia de reglas CSS de derecha a izquierda, lo que significa que el elemento en la última regla CSS anterior coincidiría primero con cada enlace de la página, lo que llevaría a la pérdida de rendimiento.

Por lo que deduzco, la solución amigable para el navegador sería ser más específica y usar, por ejemplo:

 .spotlight {} .spotlight-link {color: #333;}  

(Suponiendo que estoy usando la herencia siempre que sea posible, pero a menudo todavía necesito un control específico sobre el último elemento en el árbol)

Lo que me causa dudas es: ¿no se hinchan todos los HTML extra que imprimen los nombres de las clases en los elementos de la página y se niegan los aumentos de rendimiento obtenidos al evitar los selectores de elementos secundarios de CSS nesteds? Estoy acostumbrado a intentar escribir menos HTML y este tipo va en contra de eso. Cualquier idea sería apreciada.

Tienes que sopesarlo. Agregar una clase a cada anclaje es ridículo, la hinchazón adicional en el HTML compensaría masivamente el tiempo de renderización ahorrado (que sería 1 / 10,000th de la pata de una abeja). Por no mencionar cuán difícil sería mantener tu código.

Solo debe dejar de usar selectores innecesariamente costosos , por ejemplo

 .spotlight ul li a 

Se puede escribir como

 .spotlight a 

Si continúa especificando una sola clase en los mismos elementos en su HTML (como su segundo ejemplo), probablemente sería mejor usar un selector de tags.

También tienes que sopesar tu tiempo frente al tiempo de los navegadores. ¿Cuánto costará en su tiempo ahorrar unos nanosegundos en cada carga de página? Honestamente, no vale la pena.

Además, hacer que su estructura CSS coincida con su estructura HTML anula el punto de CSS: si el HTML cambia, debe cambiar su CSS. Así que siempre quiere que sus selectores sean lo menos específicos posible.

Pero no hay una respuesta correcta o incorrecta aquí.

Creo que la mejor solución es usar el combinador infantil para elementos que se repiten muchas veces y usar clases cuando las cosas empiezan a anidarse demasiado.

Doblando las Reglas de BEM

El artículo anterior logra el equilibrio perfecto, creo, teniendo en cuenta nuestras opciones.

Usando SCSS, que debería ser obligatorio hoy en día, mis menús de navegación se ven así (que es definitivamente lo más que anidaré):

 .header__nav { > ul { > li { > a {} } } }