Agent Wranglers

Recommended

Keep media and container queries with their component

Write every media or container query inside the stylesheet of the component it changes. Never collect them in a separate file for screen sizes or print.

By Agent Wranglers. Updated .

How to do it

A file such as responsive.css overrides components from the outside, so it breaks the one-owner rule. Put the query next to the styles it changes. Prefer container queries, so the component reacts to its own space, as Size components with container queries describes. A query inside a component file only selects classes with that file's prefix.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

/* components/order-card.css: the query lives with the card */
.order-card { container-type: inline-size; }

@container (min-width: 30rem) {
  .order-card-body { display: grid; }
}

HTML example

<article class="order-card">
  <div class="order-card-body">Two sourdough loaves, ready at 9.00</div>
</article>

How to check

No stylesheet exists whose name contains responsive, mobile, print or breakpoints. Inside each component file, every selector within @media or @container starts with the file's prefix.

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/structure-and-files/queries-with-the-component. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.