Menu
I was wondering what the experts do when it comes to writing CSS code. Is it bad to use the tagname.className style? Does inheritance cause a noticeable performance loss? Does it only affect the browser when loading a page or also after? eg: user scrolls down further the page, would poor CSS be a culprit to sluggish scrolling when viewing a page with a lot of rows of results?
CSS Examples:
div.result-row{...}
div.result-row div.photo-column{...}
div.result-row div.main-column{...}
div.result-row div.main-column div.text-row{}
div.result-row div.main-column div.date-row{}
div.result-row div.action-column{...}
vs
div.result-row{...}
div.photo-column{...}
div.main-column{...}
div.action-column{...}
div.text-row{...}
div.date-row{...}
My page is outputting a lot of user posts like this...
<div class="result-row clearfix">
<div class="photo-column">
<img src="..." />
</div>
<div class="main-column">
<div class="text-row">
User's text
</div>
<div class="date-row">
Today
</div>
</div>
<div class="action-column">
<a href="#">...</a>
<a href="#">...</a>
</div>
</div>
531
When your browser encounters CSS it stops rendering the page, parses the CSS, and builds the CSSOM (CSS Object Model). So even if you minify, compress, and merge your CSS files, an excessive amount of CSS could still slow down your website.
Optimizing for render blocking The browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets. By splitting the CSS into multiple files based on media queries, you can prevent render blocking during download of unused CSS.
Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
The documentation for Google's Page Speed has a section about using efficient CSS selectors. It mentions how descendant selectors are inefficient because once the rightmost selector has been matched "the browser must [also] traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element." Mozilla even says "the descendant selector is the most expensive selector in CSS." So div.photo-column{...} would be preferable to div.result-row div.photo-column{...}.
It also mentions that you should remove redundant qualifiers such as "class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)." That makes sense because if you have div.photo-column{...} instead of .photo-column{...} the browser has to make two checks, one to check for class="photo-column" and, if that's true, one to check if the element is a div, rather than just checking for the class, if that's all you specify.
196
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
