CSS Nesting: The Decisions That Matter
Native CSS support for writing rules inside other rules, similar to preprocessors like Sass, so related styles for a component can be grouped together.
Marcus Adeyemi
At a glance
- Syntax child rules written inside a parent rule, with & referring to the parent
- Browser support all major browsers since 2023
- Specificity nested selectors behave like :is() for specificity
- Preprocessors Sass nesting differs in some details
Why it matters
Why it matters: Nesting removes one of the main reasons teams used preprocessors, keeping component styles compact without a build step.
Best practice
- Nest to group states and children of a component
- Keep nesting shallow
- Use & explicitly for clarity
- Check specificity when migrating from Sass
- Pair nesting with cascade layers for structure
Common pitfalls
Watch out for:
- Deeply nested rules that produce long selectors
- Assuming Sass behavior carries over exactly
- Nesting unrelated selectors for convenience
- Using nesting to recreate the DOM structure
When to call in a specialist
Bottom line Bring in help when migrating a large Sass codebase to native CSS.
Where this comes from
- MDN Web Docs — Using CSS nesting
- Can I use — CSS nesting
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
