How to Use Native CSS Nesting Without Sass
Referencing the parent selector with &
Nesting rules, the most popular feature of CSS preprocessors like Sass and Less, are now supported natively in CSS. Using the & selector to reference parent context, you can logically group related styles.
It makes CSS files more readable and maintainable without a build process, and is supported in all major browsers.
How to Apply
1
Nest related selectors inside parent rules in existing CSS
2
Explicitly reference parent with & selector
3
Media queries and @supports can also be nested
4
Gradually remove Sass preprocessing dependency
Pros
- ✓ Structured CSS without build tools
- ✓ Removes preprocessor dependency to reduce build time
Cons
- ✗ Excessive nesting can increase selector specificity causing CSS conflicts
- ✗ Cannot replace Sass advanced features like variables and mixins
Use Cases
Cleanly structuring BEM-based component styles
Gradual migration from Sass to native CSS