Utility-first styling.
WHAT IT IS
A framework providing small single-purpose classes composed in the markup.
WHAT THAT PROVIDES
No naming of classes for one-off styles Styles visible where they apply Consistent values, from a configured scale Unused styles removed at build time
WHY THE LAST TWO MATTER
Arbitrary values are constrained to a defined system, and the shipped stylesheet contains only what is used.
WHAT PEOPLE OBJECT TO
Markup containing many classes.
WHAT THE RESPONSE IS
Repetition is extracted into components, not into CSS classes.
WHAT TO CONFIGURE
The design tokens: colours, spacing, type scale, breakpoints.
WHY
That configuration is your design system, and it is what makes output consistent.
WHAT TO AVOID
Arbitrary values everywhere, which defeats the constraint Extracting utility combinations into classes prematurely Very long class strings for complex components
WHAT TO DO INSTEAD
Create a component.
WHAT IT SUITS
Component-based applications Teams wanting consistency without a CSS architecture
WHAT IT DOES NOT SUIT
Projects where markup is not under your control.
