CSS selector speed

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>
    &开发者_StackOverflowlt;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.

Google's Page Speed recommendations explain how to write efficient CSS selectors: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

There are many things to consider when optimizing your rendering page speed. CSS selectors and HTML markup are just a few to consider.

Here's how to do it based upon best practices outlined in the article you read and others.

1. Markup your content

Use basic html elements unless you need additional specificity.

<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. Base Element Styles

These selectors are fast because they do not have any ancestors which need to be matched. Ideally these work for most styling needs of the page.

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

It's important to learn about which properties are inherited by child elements of element being styled. For example, when the color property is defined for the .module class, the color will be used for all child elements (unless more specific rules exist).

3. Overriding Base Element Styles

If you have many <p> tags on a page and you only want to override the styles of a few, then give those few <p> tags a class and use a class to target styles to those few <p> tags.

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

Note: If the selector string matches the specificity and comes after the rule being overridden then it is applied without requiring any additional specificity.

Using a class allows you to reuse the styles on other elements in your html document. You can also use an ID as ancestor selector to conditionally apply styles, but then you lose the speed benefit of ID. ID's should be typically used as the only element in a sector string:

#login-module { color: tan }

If you have many <p> tags and you want to override half of them (or many different groups of them) you have to make a decision to either A. add classes to them, or B. sacrifice page speed (slightly?) and use descendent selectors:

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

Do your own testing to determine if the decrease in page rendering time is significant enough to not use this solution. If it's not much (or imperceptible) then this solution may simplify your code and development time.

Summary

There are many ways to markup and style content. Choose the strategy that works best for your project's needs and adapt it as necessary based upon changes to your project. Using best practices is always wise, but knowing why they are a "best practice" is also important in order to know when you should break the rules.

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