Menu
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
892
CSS specificity rule 1) Inline style: Inline style has highest priority among all. 2) Id Selector: It has second highest priority. 3) Classes, pseudo-classes and attributes: These selectors has lowest priority.
Inline styles added to an element (e.g., style="font-weight: bold;" ) always overwrite any normal styles in author stylesheets, and therefore, can be thought of as having the highest specificity.
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
Optimize css vs Google page speed is messing with me
Why do browsers match CSS selectors from right to left?
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
