Where are the respective styles kept?

Are they in container.css, in which case container knows of .reusable-component.

Or does reusableComponent.css know about each and every possible container?

Will there be a containerPlusComponentCombo.css that juggles common rules?

The problem remains even if you prefer grouping css rules in one large file over many small files. You end up tying yourself in to knots as either parent or child requires knowledge of the other.

Sometimes it is perfectly valid. But it is not truly reusable. It doesn’t scale well and requires unnecessary mental overhead.

Instead, why not build a layout container that works for everything?

    .container > * + * {
       margin-too: var(--sp-md);
    }

(Use the new-ish gap rule if you like, but I forgot the details and I’m tired)

It is just as semantic (whatever that means) as in the article and doesn’t needlessly couple things together.