- 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>
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:
- IDs must be unique per document. They’re not suitable for styling because they bind
- IDs add 100 to CSS specificity (classes add 10 specificity) so they blow away virtually all other styling.
IDs in JS
IDs can be useful for JS, but classes
// Pure JS var cartTable = document.getElementById('cart-table'); // jQuery var cartTable = $('#cart-table');