CSS selector speed

Question

According to the new css tricks article, there is a big difference between the way you select your elements, because they are selected from right to left.

The article is here. http://css-tricks.com/efficiently-rendering-css/

I am going to create a page with different documents on one page:

My question is, how do I go about HTML for CSS performance or vice 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 may be several identical types of documents, so I can not use the 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 do this if you need to do it faster, and you have to transfer the same article to a new type of document?

Answer 1

As far as I understand, if I understand the article correctly, the most effective way to do this - if you do not use a user identifier 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. The dilemma is that writing perfectly efficient CSS is against all the rules for writing good CSS.

If there are real, actual performance problems caused by CSS rules, I would generally follow some common sense rules (for example, I wouldn’t be wasted using global selectors > * style without using "too skilled selectors" like form#UserLogin {...} without using too many rules at all ....), but otherwise focus on pure, well-structured CSS. As stated in the article itself:

I think the lesson here is not to sacrifice semantics or maintainability for efficient CSS.

Google page speed tips related to his @gulbrandr answer give good advice in the real world.

Answer 2

The Google Speed ​​page guidelines explain how to write effective CSS selectors: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 3

There are many things to consider when optimizing pageview speed. CSS selectors and HTML markup are just a few examples.

Here's how to do it based on best practices described in an article you read and others.

1. Mark up your content

Use the basic html elements if you do not need additional specifics.

 <h1>Some heading</h1> <p>Some paragraph</p> <h1>Some heading</h1> <p>Some paragraph</p> <div class="module"> <h1 class="title">Some heading</h1> <p>Some paragraph</p> </div> <div class="module featured-module"> <h1 class="title">Some heading</h1> <p class="content">Some paragraph</p> </div> 

2. Styles of the base element

These selectors are fast because they do not have ancestors that need to be matched. Ideally, this works for most page needs.

 h1 { font-size: 20px } p { font-size: 14px } .title { font-family: Georgia } .module { color: orange } 

It is important to know which properties are inherited by children of the styled element. For example, when the color property is defined for the .module class, color will be used for all children (unless more specific rules exist).

3. Overriding the styles of the base element

If there are many <p> tags on the page, and you only want to override styles from several, give those few <p> tags a class and use the class to target styles for those few <p> tags.

 .module .title { color: red } .featured-module .title { color: blue } 

Note. . If the selector string matches the specifics and appears after the rule is redefined, it is applied without any additional specificity.

Using a class allows you to reuse styles for other elements in your html document. You can also use the identifier as an ancestor selector for conditionally applying styles, but then you lose the speed gain for the ID. The identifier should usually be used as the only element in the sector line:

 #login-module { color: tan } 

If you have many <p> tags and you want to redefine half of them (or many different groups of them), you should decide to either add A. classes to them, or B. sacrifice page speed (a little?) And use the descendant selector :

 .featured-module p { } .category-module p { } 

Do your own testing to determine if a significant reduction in page rendering time is sufficient to not use this solution. If this is not so much (or imperceptibly), then this solution can simplify your code and development time.

Summary

There are many ways to layout and style. Choose the strategy that best suits your project needs and adapts it if necessary based on changes in your project. Using best practices is always wise, but knowing why they are “best practices” is also important in order to know when you should break the rules.

Note. . The selectors speed for JavaScript is not the same as in CSS. Check out these tests: http://mootools.net/slickspeed/