CSS nesting

Chris Coyier's got me thinking about CSS nesting after posting a short history of the long process of bringing CSS nesting to the browser—starting back in 2006 when Sass introduced it, through requests for comment, editor's drafts, and PostCSS plugins. We've wanted nesting since like forever.

The funny thing is, in 2022, we're moving away from nesting-based approaches to writing CSS.

BEM was the first attempt to move away from nesting-based approaches, moving the nesting from your CSS into your HTML:

/* pre-BEM */
.card .image {}

/* with nesting */
.card {
	& .image {}
}

/* post-BEM */
.card__image {}

Other (slightly more) modern solutions, like CUBE CSS, espouse a total decoupling of components: images shouldn't care about cards, and cards shouldn't care about images:

.card {}
.image {}

And yet other popular utility first-approaches, like TailwindCSS, do away with semantic class names entirely—meaning we don't even need to think about nesting.

(Code snippet left out for, hopefully, obvious reasons.)

By the time we actually get nesting in CSS, people aren't going to need it anymore. I mean, don't get me wrong—there are use cases for it, and I think that developers will find ways to use & abuse it—but it's not something I'm particularly clamoring for.

A Brief and Probably Only Partially Correct History of CSS Nesting, Chris Coyier