Question

I ran a speed test on Google and I got some good grades and bad grades for my CSS. The bad grades are due to inefficient CSS. What is that? And how can I rectify it?

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

Browsers parse CSS-Selectors from right to left. So CSS gets parsed faster, if you have less descendant selectors.

Descendant selectors are inefficient because, for each element that
matches the key, the browser must also traverse up the DOM tree,
evaluating every ancestor element until it finds a match or reaches
the root element. The less specific the key, the greater the number of
nodes that need to be evaluated.

Use efficient CSS selectors

---

Related:

Optimize css vs Google page speed is messing with me

Why do browsers match CSS selectors from right to left?