Efficient CSS

Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus:

• ID, e.g. #header
• Class, e.g. .promo
• Type, e.g. div
• Adjacent sibling, e.g. h2 + p
• Child, e.g. li > ul
• Descendant, e.g. ul a
• Universal, i.e. *
• Attribute, e.g. [type="text"]
• Pseudo-classes/-elements, e.g. a:hover

Resources

• Writing efficient CSS selectors
• Efficiently Rendering CSS by CSSTricks
• Writing efficient CSS @ Mozilla developer

Bonus Track!

• CSS Diner