CSS in 2026: What Actually Changed and What Still Matters

Subgrid

Subgrid lets a child grid adopt the track lines of its parent. It fixes the “my card headings don’t line up” problem that people used to solve with fixed heights and JavaScript measurement.

.grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.5rem;
}

.card {
 display: grid;
 grid-row: span 3;
 grid-template-rows: subgrid;
}

Now every card’s title, body, and footer sit on the same horizontal lines no matter how long the text is.

:is() and :where()

:is() takes the specificity of its most specific argument. :where() has zero specificity. That difference is the whole point: use :where() for base styles you want easy to override.

/* Zero specificity, so any single class beats it */
:where(h1, h2, h3) {
 line-height: 1.15;
 text-wrap: balance;
}

/* Grouped hover states without repeating the selector */
:is(.btn, .link, .chip):hover {
 opacity: 0.85;
}

Modern color

OKLCH is my default now. It’s perceptually uniform, which means changing lightness by a fixed amount looks like the same change across every hue. With HSL, a 10% lightness bump on yellow looks nothing like a 10% bump on blue.

:root {
 --brand: oklch(62% 0.19 255);
 --brand-dark: oklch(48% 0.19 255);
 --brand-light: oklch(88% 0.06 255);
}

/* Mix without a preprocessor */
.overlay {
 background: color-mix(in oklch, var(--brand) 70%, white);
}

color-mix() and relative color syntax mean I write far fewer hardcoded hex values than I used to. Theme swaps are mostly a matter of redefining a few custom properties.

text-wrap: balance and pretty

Two lines of CSS that replace a headline-testing habit and reduce widows in body copy.

h1, h2, h3 {
 text-wrap: balance;
}

p {
 text-wrap: pretty;
}

What I’ve stopped doing

• Reaching for Sass by default. Nesting, variables, and color math are native now. I still use a build step for bundling and minification, but the preprocessor layer is often gone.
• Writing float-based layouts. Flexbox and grid have been safe for years. There’s no reason to keep float hacks around.
• Fighting specificity with !important. A layer or a :where() usually solves it cleanly.
• Guessing at responsive breakpoints. I resize the container and watch where it breaks, then set the query there. The old device-width breakpoints are a rough starting point at best.

Cascade layers, if you maintain anything large

If you’ve ever had a third-party stylesheet win a fight it shouldn’t have, layers are the fix. You declare the order once, and later layers always beat earlier ones regardless of specificity.

@layer reset, base, components, utilities;

@layer base {
 a { color: navy; }
}

@layer utilities {
 .text-brand { color: oklch(62% 0.19 255); }
}

The utility class wins even though both selectors are one class deep, because utilities comes later in the declared order. That’s the behavior you want and it doesn’t require escalating specificity.

A realistic 2026 stack

For a typical marketing site or small app, this is roughly what I ship:

• Native CSS with nesting and custom properties, bundled and minified
• Grid and flexbox for layout, container queries for components
• OKLCH color tokens with color-mix() for derived shades
• Cascade layers to keep base, component, and utility styles from colliding
• A small amount of JavaScript for behavior, not for layout