This means to define repeating visual features as separate “skins” that you can mix-and-match with your various objects to achieve a large amount of visual variety without much code. This also means using classes to name your objects and their components, rather than relying solely on the semantics of HTML.
Essentially, this means “rarely use location-dependent styles”.
- Increase the semantic value of a section of HTML and content.
- Decrease the expectation of a specific HTML structure.
- Base
- Layout
- Module
- State
- Theme
- Only include a selector that includes semantics.
- Use child selectors.
- Avoid tag selectors for common elements.
- Use class names as the right-most selector.
Not all semantics need to be content-derived. An alternative is to derive class name semantics from repeating structural and functional patterns in a design. The most reusable components are those with class names that are independent of the content.
- Content-layer semantics are already served by HTML elements and other attributes.
- Class names impart little or no useful semantic information to machines or human visitors unless it is part of a small set of agreed upon (and machine readable) names – Microformats.
- The primary purpose of a class name is to be a hook for CSS and JavaScript. If you don’t need to add presentation and behaviour to your web documents, then you probably don’t need classes in your HTML.
- Class names should communicate useful information to developers. It’s helpful to understand what a specific class name is going to do when you read a DOM snippet, especially in multi-developer teams where front-enders won’t be the only people working with HTML components.