Overview
Most of what teams reach for libraries to do is now in the platform: layout, theming, state-based styling, and component-level responsiveness. This page names the primitives to know first and gives the Baseline status of newer features as of 1 October 2026.
Pick Grid for two dimensions and Flex for one
Choose by the dimension count, not familiarity. Use css-grid when rows and columns must line up (page shells, dashboards, form rows); use css-flexbox for a single row or column that grows and shrinks (toolbars, button groups). Nest them freely. For named areas, see css-grid-areas.
.shell { display: grid; grid-template-columns: 240px 1fr; min-block-size: 100dvh; }
.toolbar { display: flex; gap: 0.5rem; align-items: center; }Define tokens as custom properties
Put design tokens on :root and read them with var(). They cascade, respond to media queries, and read from JavaScript; see css-custom-properties. With Tailwind v4, declare them in @theme to get utilities too (tailwind). Set color tokens to clear 4.5:1 contrast (accessibility).
Order the cascade with @layer
Declare layer order once at the top; later layers win regardless of specificity, and unlayered CSS beats every layer. Put third-party CSS in its own lower layer so you override it without !important. Details in css-cascade-layers; selector reference in css-selectors.
@layer reset, base, components, utilities;Use :has() for state in descendants
:has() styles a container from what it holds and removes JavaScript that only mirrored child state onto a parent class. See css-has-selector.
.form-row:has(:user-invalid) > label { color: var(--color-danger); }Query the container, not the viewport
Use @container when a component should adapt to its slot and @media for viewport, preference, and print conditions. Set container-type: inline-size on the wrapper. See css-container-queries.
Use logical properties and fluid type
Write margin-inline, padding-block, and inset-inline-start so layouts flip in RTL and vertical writing modes. Use clamp() for type that scales without breakpoints, for example font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem). Default to the system font stack until a brand font earns its bytes; if you load one, subset it, preload it, and set font-display: swap (page-speed).
Check Baseline before relying on a feature
| Feature | Status (1 Oct 2026) |
|---|---|
Cascade layers, :focus-visible, <dialog> | Widely available |
| Container size queries | Widely available (since Aug 2025) |
:has(), nesting | Widely available (since Jun 2026) |
| Subgrid | Widely available (since Mar 2026) |
@property, @starting-style, text-wrap: balance | Newly available (2024) |
| View transitions (same-document) | Newly available (Oct 2025) |
@scope | Newly available (Mar 2026) |
| Container style queries | Newly available (May 2026) |
| Scroll-driven animations, anchor positioning, cross-document view transitions | Limited availability |
Newly available means all core browsers ship it but older versions in use may not. Limited means at least one engine lacks it; gate such features with @supports and provide a working fallback.