Geek asks and answers

What are very inefficient rules in css

I did a speed test on Google and I had good grades and bad grades for my CSS. Bad grades are due to inefficient CSS. What is it? And how can I fix 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
+5
source share
1 answer

CSS selectors parsers from right to left. This way, CSS parses faster if you have fewer child selectors.

Descendant selectors are inefficient because for each element that matches the key, the browser must also traverse the DOM tree, evaluating each element of the ancestor 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

Connected:

Css optimization vs google page speed messing with me

Why do browsers match CSS selectors from right to left?

+5
source

More articles:


All Articles