CSS nesting

If you have done any work with CSS in the last 10–15 years, you will have come across CSS pre-processors, the most enduring of which is Sass.

When Sass first appeared, there was nothing like variables, color functions, or nesting in CSS. I don’t think it’s even debatable that had it not been for the popularity and ultimate ubiquity of Sass and other pre-processors like LESS, we wouldn’t now have CSS custom properties, color manipulation functions, and hopefully soon, the topic of this section: native CSS nesting.

CSS nesting does not provide anything new in the browser. It’s purely a developer experience improvement; syntactic improvements, if you will. It’s also subtly different than how Sass implements nesting; just different enough that it might catch you out at first.

Let’s consider how CSS nesting works and you can decide whether it’s something you feel will improve your development experience or...