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, the CSS language had no variables, color functions, or nesting. 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 such as LESS, we wouldn’t now have CSS custom properties, color manipulation functions, and 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, or sugar, if you will. The native implementation is 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...