CSS container style queries: branch on a local token

When to use it

A review queue marks compact rows with a local density token. A badge inside each row can reduce its padding when the ancestor's token is compact, even if the queue and dashboard share the same viewport. The base badge spacing appears first and remains usable in browsers that do not evaluate the query. Use an exact token value, and put the token on the row wrapper rather than the badge. Inspect computed custom properties if the result seems surprising: an inherited token from a higher ancestor can become the nearest matching style container. Keep density a presentation choice; do not hide case IDs, status, or actions in compact mode. Test both token values, an unset token, a nested panel with a different token, and forced colors. A size query is the better tool when the decision really depends on available width.

.review-row { --row-density: comfortable; }
.review-row[data-density="compact"] { --row-density: compact; }
.review-row__badge { padding: .35rem .7rem; }
@container style(--row-density: compact) { .review-row__badge { padding: .2rem .45rem; } }

Cost and verification

The query avoids application code that copies a styling state into every child, but it adds a dependency on the ancestor's computed token. Repeated components should be tested with nested and inherited values, because a token set at the document root may affect far more descendants than intended. Unlike registered custom properties with a declared syntax, unregistered values should be treated as exact token matches; do not assume a different spelling or equivalent color notation will compare equal. The rule does not alter layout until its declarations do, so performance depends on the properties changed and the number of affected elements. A simple padding adjustment is cheap; hiding or reordering critical content is not a sound density policy.

Common Mistakes

• Do not expect a style query to style its own container.
• Do not assume arbitrary standard properties are reliably queryable through style().
• Do not place a broad inherited token at the root without checking nested components.

Connected lessons

• CSS Property Decisions
• CSS container queries: adapt a component to its own space
• CSS custom properties: share tokens without losing fallbacks
• CSS @scope: bound a component rule to a subtree