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
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.
