CSS Doesn't Suck: Modern Features That Replace JavaScript

The Evolution of CSS: From Styling to Behavior

For years, developers relied on JavaScript for interactive features that CSS couldn't handle: responsive components, scroll animations, state management, and modal dialogs. Modern CSS has fundamentally changed this paradigm, with techniques like CSS Modules providing scoped styling without complex build configurations.

When CSS handles layout, animation, and state logic, developers can focus JavaScript on actual application logic. This separation of concerns leads to more maintainable code and better performance across devices. Modern frameworks like Next.js embrace CSS-first approaches, letting the browser's optimized rendering engine do what it does best.

Key Benefits:

• Smaller JavaScript bundles and faster Time-to-Interactive (TTI)
• Fewer race conditions and event-handler bugs
• Better progressive enhancement and accessibility
• Browser-optimized rendering pipeline handles more work

The :has() Selector: CSS Finally Has Parent Selection

The :has() selector allows CSS to select elements based on their children or siblings. This "parent selector" capability eliminates countless JavaScript solutions for common UI patterns.

Real-World Use Cases

/* Style a card when it contains an expanded section */
.card:has(.section.expanded) {
 border-color: #2563eb;
 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Style navigation based on scroll position */
nav:has(.hero-section) {
 position: sticky;
}

/* Visual feedback when form is invalid */
form:has(input:invalid) .submit-btn {
 opacity: 0.5;
 pointer-events: none;
}

Combined with case-sensitive selectors and CSS counters, these modern selectors enable complex styling patterns that previously required JavaScript manipulation.

The :has() selector excels at conditional styling based on child state. Consider an accordion component where the parent needs styling when any panel is open, or a card grid where cards with images get different treatment than text-only cards. These patterns previously required JavaScript to toggle classes, but :has() handles them natively.

Using :has() is more performant than equivalent JavaScript solutions because the browser's style calculation engine handles it during rendering, avoiding layout thrashing and extra reflows.

Container Queries: Component-Level Responsiveness

Container queries allow components to respond to their container's size rather than the viewport, solving a fundamental limitation of responsive design. A card component can now adapt its layout whether it appears in a full-width hero section or a narrow sidebar.

/* Define a container */
.card-container {
 container-type: inline-size;
 container-name: card;
}

/* Component responds to its container */
@container card (min-width: 420px) {
 .profile-card {
 grid-template-columns: auto 1fr;
 align-items: center;
 }
}

Traditional media queries break down when the same component appears in different contexts. A navigation component might look perfect at 768px viewport width but break in a 400px sidebar. Container queries solve this by making components aware of their actual space, not the device's viewport.

Container queries become even more powerful when combined with CSS custom properties. Components can adapt their internal spacing, typography, and grid layouts based on container size while maintaining design system consistency.

Scroll-Driven Animations: Native Scroll Effects

Scroll-driven animations let you link animations to scroll position without any JavaScript event handlers. The browser handles all calculations on the compositor thread, ensuring smooth 60fps performance even on lower-end devices.

@keyframes fade-up {
 from {
 opacity: 0;
 transform: translateY(40px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

.feature-card {
 animation-name: fade-up;
 animation-duration: auto;
 animation-timeline: view();
 animation-range: entry 20% cover 60%;
}

Animation Timeline Options

• view() - Animate based on element's position in viewport
• scroll() - Animate based on scroll progress of nearest scroll container

Scroll-driven animations enable sophisticated parallax effects and reveal-on-scroll animations that were previously the domain of heavy JavaScript libraries. Because the browser controls the animation timeline, effects remain smooth even during rapid scrolling, improving Core Web Vitals scores.

Native Popovers and Dialogs

The HTML Popover API provides built-in functionality for tooltips, dropdown menus, and other overlay patterns that previously required JavaScript libraries or complex custom implementations.

<button popovertarget="info-pop" class="btn-info">
 More info
</button>

<div id="info-pop" popover class="popover">
 Modern CSS can handle this tooltip without JS.
</div>

Accessibility Benefits

Native popovers handle focus management, keyboard navigation, and screen reader announcements automatically. This accessibility groundwork would require substantial effort to implement correctly in custom JavaScript solutions. The <dialog> element provides modal dialogs with backdrop and focus trapping, while popovers handle non-modal overlays.

These native solutions reduce JavaScript dependency while ensuring consistent, accessible behavior across browsers and improving accessibility compliance.

Performance Benefits of CSS-First Approaches

By reducing JavaScript dependency, teams can hire web developers who specialize in CSS-first architectures, leading to faster page loads and better user engagement metrics across all devices.

Bundle Size Reduction

Modern CSS features eliminate entire categories of JavaScript dependencies. Components using :has() for state styling, container queries for responsiveness, and scroll-driven animations for motion ship zero JavaScript for these behaviors. This reduction compounds across a large application.

Rendering Performance

CSS animations and layout calculations run in browser-optimized code paths. Scroll-driven animations specifically run on the compositor thread, meaning they won't cause main thread blocking even during heavy scrolling. This performance advantage translates to better Core Web Vitals scores and improved user experience.

Progressive Enhancement

Most modern CSS features gracefully degrade. A site using text-wrap: balance will look slightly less polished in older browsers but remain fully functional. This progressive enhancement approach lets developers use cutting-edge features while maintaining broad compatibility across all browsers.

When to Use CSS vs JavaScript

Use CSS When:

• Styling depends on element state or parent/child relationships
• Animations are tied to scroll position or viewport visibility
• Layout decisions depend on container size
• Interactions are simple state toggles (modals, tooltips, accordions)
• Typography improvements enhance readability

Use JavaScript When:

• Logic requires conditional computation based on runtime values
• DOM manipulation goes beyond style changes
• Data fetching drives UI updates
• Complex state management spans multiple components
• Browser APIs beyond CSS are required

The goal isn't to eliminate JavaScript but to use it where it adds genuine value while letting CSS handle what it does best. This approach, known as the "CSS-first" methodology, results in faster websites, smaller bundles, and more maintainable codebases.

Best Practices for Modern CSS

Container queries encourage component-based organization where styles travel with components rather than living in global stylesheets. Use CSS custom properties systematically for theming and configuration. Keep selectors efficient by combining :has() with specific child selectors to help browsers optimize style calculations. Test responsive behavior at container level rather than just viewport breakpoints.

Sources

1. DEV Community - The Ultimate 2025 CSS Guide - Comprehensive guide covering modern CSS features that reduce JavaScript dependency
2. Frontend Masters - What You Need to Know about Modern CSS (2025 Edition) - Authoritative coverage of cutting-edge CSS features
3. MDN Web Docs - CSS Scroll-Driven Animations - Official documentation on native scroll animations
4. MDN Web Docs - CSS Container Queries - Official documentation on component-level responsiveness
5. OpenReplay - Modern CSS Features You No Longer Need JavaScript For - CSS vs JavaScript feature comparisons