Stop using CSS preprocessor!
CSS nesting is now natively supported.
If you were using a preprocessor only for this feature,
It might be time to go back to plain CSS.
(Otherwise you can stick with it).
1/ No build tools required
- It makes the development setup easier.
- It also reduces the project’s build time.
2/ Reduced file size
- Sass expands rules during compilation, increasing the final CSS size.
- CSS nesting doesn’t expand rules, resulting in smaller CSS.
Browser support is already strong at 91.3%.
But keep in mind that unsupported browsers will fail to parse nested rules.
If you need full compatibility, consider using a build step until support is universal.
If nesting was the only thing keeping you tied to a preprocessor… maybe it’s time to go vanilla.
Native nesting improves readability when selector depth remains shallow. Keep nesting focused on component structure, so maintainability stays high and specificity does not creep upward.
Native nesting improves readability when kept shallow and component-scoped. Avoid deep chains, so specificity and maintainability stay under control.
Validate it with real content and realistic viewport ranges so implementation details hold up outside demos.
When introducing CSS nesting, begin with one reference component and treat it as the canonical pattern. That rollout sequence preserves clarity and reduces regressions during future refactors.
As a final check, run CSS nesting through edge cases like dense layouts, long labels, and constrained mobile widths.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!