Moving Beyond Modifier Classes

CSS style queries provide a powerful alternative to traditional BEM-style modifier classes (e.g., .card--primary). Instead of manually applying classes to every child element, you can define a custom property on a parent container. The child components then use an @container style(...) query to detect that property and automatically apply the corresponding theme. This approach decouples the component's internal logic from its parent's configuration, allowing for cleaner, more maintainable code where the parent dictates the theme and the children adapt accordingly.

Conditional Styling and Responsive Layouts

Style queries excel when used to apply conditional styles based on layout context rather than just global state. By toggling a custom property at specific breakpoints, you can trigger "compact" or "expanded" modes for components only when they exist within a specific container (like a sidebar) or layout state (like a two-column grid).

This technique replaces the need for JavaScript-based class toggling or complex, redundant CSS media queries. For example, you can set a --card-density: compact property on a sidebar container at a specific breakpoint, and all cards within that container will automatically shrink. This keeps the logic contained within CSS, ensuring that component behavior is tied directly to the layout context rather than hardcoded class names.