Modern CSS Is Replacing Your JavaScript

For years, we've treated CSS as a pure styling language and JavaScript as the "real" logic layer. If something needed to respond to state, toggle visibility, or calculate positions — we reached for JS. That's outdated. Modern CSS can now handle state, layout intelligence, and UI logic natively. Let's break down 6 features you're probably underusing.

1. :has() — The Parent Selector We Waited a Decade For

The :has() pseudo-class is arguably the most powerful CSS feature added in years. It allows you to style a parent element based on the state or existence of its children. Previously, if you wanted to highlight a card when a user checked a box inside it, you had to attach event listeners and toggle classes with JavaScript.

Now, it's a single CSS rule. Zero state management needed just to change a border color. Use cases: Form validation UI, interactive cards, accordion states, and navigation highlighting.

2. Container Queries — True Component Responsiveness

Media queries are global. They respond to the viewport. That's fine until your responsive component lives inside a sidebar, a dashboard widget, or a resizable panel. Then it breaks, because the viewport is wide, but the component's actual container is narrow.

With @container, components adapt to their parent's width, not the viewport. This is fundamental for building truly reusable component libraries and design systems. If you're building isolated UI components without container queries, you're building them rigidly.

3. Anchor Positioning & Popover API — Tooltips & Menus

Positioning tooltips or dropdowns used to require position: relative wrappers, manual top/left offset calculations, and nasty event listener logic (like outside-click detection and escape key focus trapping). It was fragile and broke constantly on scroll or resize.

Now, the pair of Anchor Positioning and the Popover API removes the math entirely. The browser natively handles open/close state, light dismiss (clicking outside), z-index elevation, and linking an absolutely positioned element to its origin anchor. If you're building custom dropdown logic in 2026, you're reinventing what the browser already solved.

4. clamp() — Fluid Typography Without Breakpoints

Scaling font sizes and spacing used to mean writing multiple stacked @media queries, leading to jumpy "snap" transitions on resize and lots of duplicated declarations. The modern approach is mathematically fluid.

clamp(min, preferred, max) scales your value smoothly between a minimum bound and a maximum bound, based on the current viewport width. One line replaces four block declarations. Fluid design > breakpoint jumps.

5. light-dark() Function — Stop Theme Duplication

Implementing dark mode usually results in bloated CSS because you have to duplicate almost every block inside a @media (prefers-color-scheme: dark) query.

The light-dark(light_value, dark_value) function replaces that pattern. You declare the property once, give it two situational values, and let CSS handle the switch instantly via the root color-scheme. It cuts CSS duplication in half.

The Bigger Point

Modern CSS is incredibly capable. Every bit of state, animation, or structural reflow you can offload from JavaScript to pure CSS means a smaller bundle, better browser optimization, and fewer lifecycle hook bugs to manage in your JS frameworks.

Next time you reflexively start writing JS logic for UI presentation, pause and ask:

"Can CSS already do this?"

Because increasingly, the answer is yes.