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/
