CSS architecture & layout

Overview

CSS is the most load-bearing language engineers refuse to learn properly. It scales badly not because it is broken but because it is global by design — the cascade, specificity, and inheritance are a power tool without a guard. CSS architecture is the set of conventions that put the guard on (naming, layers, scoping), and modern layout (flexbox, grid, container queries) plus modern primitives (custom properties, :has(), nesting) have quietly removed most historical reasons for hacks and heavy tooling.

Key points

Understand the cascade instead of fighting it: specificity is a sortable tuple, not a mystery; @layer makes priority explicit and ends the specificity arms race (resets < tokens < components < utilities < overrides); :where() zeroes specificity where you want components overridable.
Flexbox for one dimension, grid for two: flexbox distributes space along a line (toolbars, nav, centering); grid places into a defined structure (page scaffolds, cards, forms) — minmax(), auto-fit, and named areas replace whole libraries of breakpoint CSS.
Container queries change the responsive unit: components respond to their container, not the viewport — the missing piece that makes a design system component truly portable. Media queries remain for page-level concerns and user preferences (prefers-color-scheme, prefers-reduced-motion).
Custom properties are the runtime API of your styling: design tokens land as --semantic-* variables; theming and dark mode become a token swap, not a rewrite — the mechanism the design system token layer compiles to.
The methodology debate is a scoping debate: BEM (naming as manual scope), CSS Modules (build-time scope), CSS-in-JS (runtime scope, colocated — now paying a server-rendering cost), utility-first/Tailwind (design constrained to a token scale, markup as the stylesheet). Each trades where the complexity lives; utilities + a token scale + a few components is the current pragmatic center.
Intrinsic over pixel-perfect: min(), max(), clamp(), fluid type, and content-driven sizing produce layouts that survive real content — Every Layout's composable primitives (stack, cluster, sidebar) over per-page bespoke CSS.

Details

A scalable stylesheet, minimally

@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root { --color-action: oklch(55% 0.2 250); --space-2: 0.5rem; }
}
@layer components {
  .card { padding: var(--space-2); }
  :where(.card) h2 { /* overridable by anyone */ }
}

Five layers, semantic tokens, zero specificity wars. Most architecture beyond this is organization, not technology.

What killed the old hacks

Gap in flexbox (no margin gymnastics), grid (no float/clearfix layouts), aspect-ratio (no padding-top trick), :has() (parent selection — state styling without JS classes), nesting (no preprocessor needed for structure), logical properties (margin-inline-start — free RTL support).

Practice

Layout warm-ups (source) — Grid Garden and Flexbox Froggy until placement is reflex, then CSS Battle for the golf.
Clone a real page, no framework — pick a dense production page (GitHub repo view, a news front page) and rebuild its layout with semantic HTML + grid/flex only; the gaps in your mental model surface within the hour.
Every Layout primitives (source) — implement stack, cluster, sidebar, and switcher as your own utilities; drills intrinsic sizing over breakpoint thinking.
Design system from scratch (source) — the token → component pipeline is where this architecture gets load-tested.