Conventions

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

IDs in JS

IDs can be useful for JS, but classes

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

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