Scoped approaches.
WHAT THE OPTIONS ARE
Styles written in JavaScript, generated at runtime or build time CSS modules, where class names are made unique automatically Scoped styles, provided natively by some frameworks
WHAT THEY SOLVE
Styles from one component affecting another.
WHY THAT MATTERS
Global stylesheets in large applications produce conflicts nobody can trace.
WHAT CSS MODULES PROVIDE
Ordinary stylesheets, with class names scoped to the file.
WHY THAT IS APPEALING
It is plain CSS, with no runtime cost.
WHAT RUNTIME APPROACHES COST
JavaScript executing to produce styles, which affects performance.
WHAT TO PREFER WHERE PERFORMANCE MATTERS
Build-time approaches.
WHAT TO BE CAREFUL WITH
Dynamic styles generated per render Large style objects recreated each render Server rendering, which requires style extraction
WHAT SCOPED STYLES DO NOT SOLVE
Consistency.
WHY
Each component may still use arbitrary values.
WHAT TO PAIR THEM WITH
Defined tokens for colour, spacing and type.
WHAT TO ESTABLISH
One approach per project.
