Using classes

• Classes have no effect on semantics. They do affect extensibility.
• Classes can be stacked (and should). Take advantage of this modularity.
• Classes are case sensitive. Only use lowercase letters for consistency.
• Class-based CSS selectors are faster than element-based selectors.

<button class="button button--small">
    Add To Cart
</button>

Using IDs

IDs as #hash links

Hash-linking is probably the only way IDs should be used today.

<a href="#content">
    Skip to content
</a>

IDs in CSS

Never use IDs for CSS styling because:

1. IDs must be unique per document. They’re not suitable for styling because they bind markup:CSS in a 1:1 relationship.
2. IDs add 100 to CSS specificity (classes add 10 specificity) so they blow away virtually all other styling.

Resources

• Field Manuals: Code: CSS: Specificity

IDs in JS

IDs can be useful for JS, but classes

// Pure JS
var cartTable = document.getElementById('cart-table');

// jQuery
var cartTable = $('#cart-table');