CSS Nesting Module (Draft)

Update 2021-08-31: The CSS Working Group published a first public Working Draft of the CSS Nesting Module.

CSS might be getting the ability to nest rulesets similar to how it works in several CSS preprocessors.

This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
— Source

• [CSSWG] CSS Nesting Module Draft
• CSS-Nesting issues and discussions on GitHub
• https://github.com/w3c/csswg-drafts/tree/main/css-nesting-1

That is not a new idea, though. A version of the proposal was already drafted between 2013 and 2015. But it got a new home in the CSSWG and some more momentum in 2020 and 2021. There is also some context on why it got more momentum.

If you want to try CSS nesting today, you can do so by using PostCSS with postcss-preset-env. But make sure to learn about the specificity implications of CSS nesting.