> .card > .card-header

And we know that it never worked well. That's why BEM and many other naming strategies exist: to try and replicate scoping purely through naming discipline.

> That was nesting, IIRC. Sugar syntax, so you don’t have to fully specified the whole selector.

Nesting partly solves the naming and the "keep all of a component's style close together".

The other partial solution is CSS Scoping: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

And this still doesn't solve the issue of repetition where every component has to spell out the margins, the paddings, the borders, the...