Utility-first means your default tool is atomic classes, and named components are a second step when repetition proves the pattern is stable.
When to extract
- Same cluster of 8+ classes copied across files → consider a React/Vue component or
@apply - Designer names a pattern (“pricing card”) → document it as a component
- One-off alignment fix → keep utilities in markup
This mirrors the hybrid approach in Utility CSS: hybrid components—utilities for layout, components for product vocabulary.
Important interview questions and answers
- Q: Does utility-first mean no components?
A: No. Components are still essential; utilities reduce the need to invent CSS for every margin tweak. - Q: How do you keep HTML readable?
A: Extract components, use multi-line class formatting, group related utilities (layout → spacing → color), and avoid arbitrary one-offs when scale tokens exist.
Self-check
- Give a rule of thumb for when you stop stacking utilities and extract a component.
- What is one readability technique for long class lists?
Interview prep
- When should you reach for a component class instead of utilities?
When the same cluster repeats, when design names a reusable pattern, or when markup readability suffers.