Organizing CSS
9 steps in 4 sets of CSS.
Nine steps on keeping a stylesheet sane at size. A foundation layer and a sensible reset, naming conventions, then themes and cascade layers.
Short tour, and the least glamorous one here. It is also the one that decides whether the other four stay usable after a year.
Foundations
- A reset worth keepingNot the 400-line kind: the dozen rules whose absence you would actually notice.
- Design tokensTwo layers: raw values with boring names, and semantic names that point at them.
- A type scalePick a ratio, generate the steps, and stop choosing font sizes by eye.
Naming things
- Naming a componentBlock, element, modifier: a convention that makes a class say where it belongs.
- UtilitiesOne job each, no context, and always the last word in the cascade.
- Styling from stateThe state lives in an attribute the script already has to set, so the class list stays still.
Themes & tools
- ThemingOne set of names, three ways to choose the values: the system, a class, an attribute.
- Seeing the boxesThree throwaway rules that answer most layout questions faster than the inspector.
Encore
- token_system.cssA whole small design system: tokens, themes, a type scale, and the components built on them.