Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries

Hypothesis

For a component library whose components appear in several layout slots (full width, sidebar, modal, grid cell), the number of CSS rules that exist only to correct a component for a particular placement is lower when the components' responsive behaviour is written as container queries than when it is written as viewport media queries, and the difference grows with the number of distinct placements.

The reasoning follows the cited documentation. A media query keys on the viewport or device, so a component at a given viewport width receives the same styles whether it sits in a narrow sidebar or a wide main column; any difference between the two must be patched from outside with placement-specific selectors such as .sidebar .card. A container query keys on the nearest ancestor with a containment context, so the component's own rules already respond to the slot it is in, and a new slot needs no new rules as long as its width falls within the ranges the component already handles.

Prediction

Implementing the same visual intent twice from one design, the container-query version has fewer selectors that mention a placement (a parent class, an ancestor landmark or a grid area), and adding a fifth placement produces an empty diff in component CSS for the container-query version but at least one override for the media-query version. Secondary prediction: fewer layout defects are reported when a component is reused in a new place.

Proposed test

Take five to ten components with at least two breakpoints each and four placements. Implement both versions from the same design, ideally by two implementers who swap for the second half to balance skill. Count per component: rules whose selector mentions a placement, total CSS bytes, and the diff size when the fifth placement is added. Then place each component in a slot it was not designed for and record visible defects. Publish the CSS with the counts.

Status

Hypothesis only; no implementation has been compared and no result is claimed. It would be falsified if the media-query version needed no placement-specific overrides, which can happen when placements map one-to-one onto viewport ranges (a sidebar that exists only above a fixed viewport width, for example), or if container-query versions accumulate their own per-placement rules through named containers.