Managing CSS in a large-scale application is notoriously difficult. Without a clear strategy, it quickly becomes a tangled web of overrides, !important tags, and unused styles. At ModernSaaS, we decided to tackle this head-on by adopting a modern, hybrid architecture.
The Problem with Utility-First Only
While Tailwind CSS is incredible for rapid development, relying solely on utility classes in a complex design system can lead to massive HTML files and inconsistent patterns. We needed a way to define high-level components while keeping the flexibility of utilities.
Enter CUBE CSS
CUBE stands for Composition, Utility, Block, and Exception. It's a methodology that prioritizes the way elements are composed together over their individual styles.
- Composition: Defines high-level layouts (grids, stacks).
- Utility: One-off styles (margin, padding, color).
- Block: The individual component (Button, Card).
- Exception: State-based changes (isActive, isError).
Our Implementation
We use Tailwind for our **Compositions** and **Utilities**, and CSS Modules for our **Blocks**. This gives us the best of both worlds: a standardized layout system with scoped, maintainable component styles.
/* Example of a Block with Exceptions */
.button {
display: inline-flex;
padding: 0.5rem 1rem;
}
.button[data-variant="primary"] {
background-color: var(--color-primary);
}"Architecture is about making choices that minimize future pain. Our CSS strategy allows us to ship features faster without worrying about breaking existing styles." — Sarah Mitchell, Lead Engineer
Results
Since switching to this architecture, our CSS bundle size has decreased by 40%, and the time it takes to onboard new frontend engineers has been cut in half.
