How the Style System Matches RulesThe style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). As long as the selector continues to check out, the style system continues moving to the left until it either matches the rule, or abandons because of a mismatch.The most fundamental concept to learn is this rule filtering. The categories exist in order to filter out irrelevant rules (so the style system doesn’t waste time trying to match them).This is the key to dramatically increasing performance. The fewer rules required to check for a given element, the faster style resolution will be.For example, if an element has an ID, then only ID rules that match the element’s ID will be checked. Only Class Rules for a class found on the element will be checked. Universal Rules will always be checked.
Avoid Universal Rules
Make sure a rule doesn’t end up in the universal category!
Since IDs are unique, adding a name would slow down the matching process needlessly.
The previous concept also applies here. All class names are unique.
One convention you can use is to include the name in the class name. However, this may cost some flexibility; the class names must be changed as well. (It’s best to choose strictly semantic names, as such flexibility is one of the aims of separate stylesheets.)Use the most specific category possible
The single biggest cause of slowdown is too many rules . By adding classes, we can further subdivide these rules into Classes, which eliminates time spent trying to match rules for a given class.It is dreadfully expensive—especially if the selector is in the Universal Category.
Frequently, what is really desired is the child selector.
Avoid using the child selector with rules. This will dramatically lengthen the match time (especially if the rule is likely to be matched) for all occurrences.Question all usages of the child selector
Exercise caution when using the child selector. Avoid it if you can.
Rely on inheritanceLearn which properties inherit, and allow them to do so! Remember: Elements all have the same classes—especially anonymous content!
