This looks good. I've been using mdn mostly; but I usually go deep into CSS for a bit then leave it for long periods of time. That said, what has replaced SASS? I'm struggling to find a preprocessor that allows nesting/grouping etc. Or is that built into CSS by now? Being able to nest CSS was a game changer for me in terms of css organization.
I'd say that "nesting is bad" has replaced SASS. Nesting encourages long selector chains which are generally a bad practice. That CSS makes this painful is a nice reminder to only use long selector chains where necessary.
Sass still has a lot of popularity in the BEM world where you can use nesting to generate flat classnames that would be tedious to write out by hand, e.g.:
.element {
&__title {
color: red;
}
&__subtitle {
color: blue;
}
}
.element__title {
color: red;
}
.element__subtitle {
color: blue;
}