Structure at scale.
WHAT GOES WRONG WITHOUT ORGANISATION
Styles nobody can find Rules nobody dares remove Escalating specificity as overrides accumulate The same value defined in dozens of places
WHAT TO ESTABLISH
A structure: reset or base, then layout, then components, then utilities
A naming convention A set of defined values for colour, spacing and type
WHAT TO ORGANISE BY
Component.
WHY
Components are reused; page-specific styles are not.
WHAT TO AVOID
Deeply nested rules Overrides upon overrides Styles applied by document position
WHAT PREPROCESSORS AND MODERN CSS PROVIDE
Variables, nesting and composition.
WHAT TO BE CAREFUL WITH
Nesting deeply, which produces high specificity invisibly.
WHAT TO REMOVE
Styles for components that no longer exist.
WHY
Unused styles accumulate and slow every page.
WHAT TO AUDIT
How many distinct colours, sizes and spacing values exist.
WHAT YOU WILL FIND
Considerably more than intended.
WHAT TO DOCUMENT
The conventions, so others follow them.
