---
name: dec-css-architecture
description: CSS and styling architecture — scaling methodologies (BEM, ITCSS, CUBE CSS) and fluid/responsive technique (mobile-first, clamp() fluid type/space, container queries for component-level responsiveness). Use when structuring stylesheets at scale, choosing a CSS methodology, building responsive layouts, or deciding between media queries and container queries.
tags: [css, styling, responsive, container-queries, architecture, always-on]
---

# 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.