According to new article from css-tricks there is a big difference between how you select your elements because they are selected from right to left.
The article can be found here. http://css-tricks.com/efficiently-rendering-css/
I am about to create a page that have different documents on the same page:
My question is, how should i go about the HTML for CSS efficiency or vise versa?
<div class="document-type-1">
<h1>Some heading</h1>
<p>Some paragraph</p>
</div>
<div class="document-type-2">
<h1>Some heading</h1>
<p>Some paragraph</p>
</div>
There can be multiple of the same document type, i can therefore not use an ID.
.document-type-1 h1 {
}
.document-type-1 p {
}
.document-type-2 h1 {
}
.document-type-2 p {
}
This will be "inefficient" since all p tags are found first...
How would you go about it if this should be done faster and you should be able to move the same article to a new document type?
As far as I can see, if I understand the article correctly, the most efficient way to do this - if you don't use a custom ID for each element - would be:
// YUCK!
<div class="document-type-1">
<h1 class="document-type-1-h1">Some heading</h1>
<p class="document-type-1-p">Some paragraph</p>
</div>
.document-type-1-h1 {
}
.document-type-1-p {
}
But this is disgusting. It is a dilemma that writing perfectly efficient CSS goes against all rules of writing good CSS.
Unless there are real, actual rendering speed problems caused by CSS rules, I would tend to obey some common-sense rules (e.g. not being wasteful with global selectors > *
style, not using "overly qualified selectors" like form#UserLogin {...}
, not using too many rules in general....), but otherwise focus on clean, well structured CSS. As the article itself states:
I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.
The Google Page Speed tips linked to by @gulbrandr in his answer give some good real-world advice.
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