CSS / Styling Architecture

How to keep styles scalable and responsive without a utility-first system doing it for you.

• Methodologies: BEM (block__element--modifier naming), ITCSS (inverted-triangle layering by specificity/reach), and CUBE CSS (Composition, Utility, Block, Exception) for scaling stylesheets when not on a utility-first framework.
• Fluid & Responsive:
  • Mobile-first — start from the smallest viewport, layer up.
  • clamp() — fluid type and space that scale between a min and max without breakpoints.
  • Container queries — component-level responsiveness based on the container's size, not the viewport. The component adapts wherever it's placed.

How to apply

• On a custom (non-utility) codebase, pick one methodology and hold the line — consistency beats the "best" choice.
• Reach for container queries when a component must adapt to its slot (sidebar vs main), not the whole screen — media queries can't express that.
• Use clamp() for type and spacing scales to cut breakpoint count and avoid stepwise jumps.
• Start mobile-first; treat larger screens as progressive enhancement.