Why I Still Write Vanilla CSS (Sometimes)
Tailwind, CSS-in-JS, SASS... sometimes plain CSS is still the right choice.
The CSS Landscape
Every project I see now uses:
- Tailwind
- Styled Components
- CSS Modules
- Emotion
- Some combination
And they're all fine. But sometimes, just writing CSS is... also fine?
When Vanilla Makes Sense
Small Projects
For a quick demo or landing page, setting up a build process for CSS feels like overkill:
<link rel="stylesheet" href="styles.css">Done. No config, no build step, no dependencies.
Learning
CSS has gotten really good. Custom properties, container queries, `:has()` selector, subgrid... If you haven't written vanilla CSS recently, you might be surprised:
/* Custom properties */
:root {
--primary: #4f46e5;
--radius: 8px;
}
.btn {
background: var(--primary);
border-radius: var(--radius);
}
/* Container queries */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
/* :has() selector */
.form:has(:invalid) .submit-btn {
opacity: 0.5;
pointer-events: none;
}No Dependencies
CSS doesn't break when you update Node. It doesn't have security vulnerabilities. It doesn't add to your bundle size.
When I Use Frameworks
Tailwind
Large apps with design systems. The utility-first approach scales well with teams.
CSS Modules
React apps where I want scoped styles without runtime overhead.
SASS
When I need nesting (though CSS has this natively now) or complex calculations.
My Current Take
1. **Start with vanilla CSS** - It's probably enough 2. **Add tools when you feel pain** - Not preemptively 3. **Learn modern CSS features** - Many "problems" are solved natively now
The best CSS approach is the one your team can maintain. Sometimes that's Tailwind. Sometimes it's a single stylesheet.