Programming Tutorials

  The mental model for responsive design has shifted. For years, we relied on the Viewport ( @media ). Recently, we gained the ability to query the Parent's dimensions ( @container (min-width: ...) ). However, Design System Architects often hit a wall when solving for  context  rather than  space . You have a card component. It looks perfect on a white background. You place that same card into a dark-themed sidebar or a branded hero section, and the contrast fails. The immediate reaction is often to use a dimensional container query or revert to prop-drilling (e.g.,  <Card variant="inverted" /> ). Both are architectural smells. Dimensional queries shouldn't handle theming, and prop-drilling defeats the purpose of composition. This is the exact use case for  Container Style Queries . The Architecture Gap: Dimensions vs. State The confusion stems from conflating  Layout  with  Logic . Dimensional Queries ( size ,  inline-size ) : The...

  The "Bento" grid design trend—characterized by modular, card-based layouts with heavy corner rounding—has introduced a subtle but pervasive accessibility regression. To achieve the signature Bento look, developers instinctively apply  overflow: hidden  to card containers. This ensures that background images, videos, or child elements strictly adhere to the parent's  border-radius . However, this architectural decision creates a conflict with the CSS Box Model: standard focus outlines are rendered  outside  the border edge. When  overflow  is hidden, the browser clips the focus ring, rendering it invisible or partially cut off. This results in a direct violation of  WCAG 2.4.7 (Focus Visible)  and often fails  WCAG 2.2 SC 2.4.11 (Focus Appearance)  due to insufficient contrast area. Below is the root cause analysis and the architectural pattern to resolve this without compromising the design system. The Root Cause: The Paint O...