Use utilities for layout and spacing tweaks. Promote to a component when you repeat the same cluster of classes more than a few times or when designers define a named pattern (“pricing card”).
Rule of thumb
- 3+ repeated utility chains → extract
.product-card(component) - One-off alignment fix → keep utilities
Going deeper
In production utility-first CSS work, Utilities vs component CSS matters when documents, stylesheets, or apps must stay maintainable across teams and releases—not only in isolated demos.
Common pitfalls
Watch for copy-paste configs, skipping validation or tests, and mixing concerns (structure vs presentation vs behavior) in one layer.
Practice
- Apply one technique from this lesson in the playground.
- Write one interview-style sentence explaining when you would use utilities vs component css on a real project.
Interview prep
- When should you extract a component class?
When the same cluster of utilities repeats often, or when design names a reusable pattern (card, alert, navbar).