Qué es Reglas muy ineficientes en css

Question

Realicé una prueba de velocidad en Google y obtuve algunas buenas calificaciones y malas calificaciones para mi CSS. Las malas calificaciones se deben a CSS ineficiente. ¿Que es eso? ¿Y cómo puedo rectificarlo?

Very inefficient rules (good to fix on any page): 
#menu ul ul li:first-child a:after Tag key with 4 descendant selectors 
#menu ul ul li:first-child a:hover:after Tag key with 4 descendant selectors 

Answer 1

Navegadores parse CSS-Selectores de derecha a izquierda. Entonces CSS se analiza más rápido, si tiene menos selectores descendientes.

selectores de descendientes son ineficientes porque, para cada elemento que coincide con la clave, el navegador también debe atravesar el árbol DOM, evaluar cada elemento ancestro hasta que se encuentra una coincidencia o alcanza el elemento raíz. Cuanto menos específica es la clave, mayor es el número de nodos que deben evaluarse.

Use efficient CSS selectors

---

relacionadas:

Optimize css vs Google page speed is messing with me

Why do browsers match CSS selectors from right to left?