Every design system has had the same bug: a card that looks right in the main column and wrong in the sidebar, at identical viewport widths.

Asking the right question

Media queries ask about the viewport, which is a proxy for the space a component actually has. The proxy breaks the moment the same component appears in two layouts. Container queries let the component ask directly, which means a card can finally be genuinely reusable rather than reusable-if-you-pass-the-right-modifier.

The practical effect on our codebase was deletion. Roughly forty modifier classes — card--narrow, card--sidebar, card--compact — existed only to tell a component about its context. All of them went, and with them the bugs that came from passing the wrong one.

Container query units are the underrated half. Sizing type and spacing against the container rather than the viewport makes a component scale as a unit, which is what designers assumed was happening all along.