Stop Using JavaScript for CSS

Introduction

For years, developers reached for JavaScript to solve styling challenges that CSS couldn't handle. Need responsive components? JavaScript resize listeners. Parent-based styling? JavaScript class manipulation. Complex animations? JavaScript animation libraries. But 2025 marks a turning point--the CSS specification has finally caught up, offering native solutions that eliminate the need for JavaScript-driven styling entirely.

Modern CSS provides powerful features that once required JavaScript libraries or custom scripts. Container queries let components respond to their container size. The :has() selector enables parent-based styling. Cascade layers solve specificity headaches. These aren't experimental features--they're well-supported standards that major browsers fully implement.

The result? Faster websites, smaller bundles, better accessibility, and simpler codebases. By adopting modern web development practices that leverage native CSS, teams reduce bundle sizes while improving maintainability.

The Problem with JavaScript-Driven Styling

Why We Started Using JS for CSS

The web development community turned to JavaScript for styling solutions because CSS lagged behind in several critical areas. Responsive components required viewport detection. Parent styling needed class manipulation. Animations demanded precise control that CSS couldn't provide. CSS-in-JS libraries emerged as a solution, offering scoped styles, dynamic theming, and critical CSS extraction.

These solutions worked, but at a cost. Each JavaScript library added kilobytes to the bundle. Runtime style calculations blocked the main thread. Server-side rendering became more complex.

The Performance Cost

JavaScript-driven styling introduces performance overhead that impacts every user interaction. When JavaScript calculates and applies styles, the browser must execute code, recalculate layouts, and repaint elements. This happens on the main thread, competing with user input, animations, and other critical operations.

Native CSS, by contrast, runs on a separate styling engine optimized specifically for these tasks.

Container Queries: Components That Adapt to Their Container

Before container queries, developers wrote responsive styles based on viewport dimensions. A card component would adapt at 768px, regardless of where that card appeared. This approach failed when the same card was used in a full-width hero section and a narrow sidebar.

Container queries solve this by basing styles on the parent container's size instead of the viewport. Components become truly reusable--they adapt their layout based on available space, not screen width.

.card-container {
 container-type: inline-size;
 container-name: card;
}

@container card (min-width: 500px) {
 .card-content {
 display: flex;
 gap: 1rem;
 }
}

Container queries have excellent browser support, with over 95% global coverage as of 2025, according to Can I Use.

The :has() Selector: Parent and Previous Sibling Styling

The :has() selector represents the most significant addition to CSS in years. For the first time, CSS gained a true parent selector--a way to style an element based on its children.

.card:has(.featured) {
 border-color: #ff6b00;
 box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
}

.form-field:has(input:invalid) .error-message {
 display: block;
}

Before :has(), developers used JavaScript to detect child states and apply parent classes. With :has(), CSS handles this natively without any runtime overhead.

The :has() selector is now supported in all modern browsers, making it one of the most widely adopted CSS features in recent years.

Cascade Layers: Explicit Control Over Specificity

Cascade layers solve one of CSS's most frustrating problems: specificity conflicts. Layers create explicit cascade levels where styles in higher layers override styles in lower layers, regardless of specificity.

@layer base {
 body {
 font-family: system-ui, sans-serif;
 line-height: 1.5;
 }
}

@layer components {
 .card {
 padding: 1.5rem;
 border-radius: 8px;
 }
}

@layer utilities {
 .text-center {
 text-align: center;
 }
}

@layer base, components, utilities;

This approach gives developers predictable control over style precedence without requiring CSS-in-JS libraries, as documented in MDN's cascade layers guide.

CSS Nesting: Native Syntax That Replaces Preprocessors

CSS nesting is now supported natively in all modern browsers, eliminating the need for Sass or Less preprocessing for nested selectors. With over 90% global browser support according to Can I Use, native CSS nesting is production-ready.

.card {
 padding: 1.5rem;

 &.featured {
 border-color: #ff6b00;
 }

 &:hover {
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .card-header {
 margin-bottom: 1rem;

 h3 {
 font-size: 1.25rem;
 }
 }
}

This mirrors what developers already used in preprocessors, making migration straightforward while eliminating an entire build step.

Animation Features That Eliminate JS Animation Libraries

Modern CSS allows combining multiple animations without JavaScript interference using animation-composition:

.spinner {
 --rotation: 0deg;
 animation: spin 2s linear infinite,
 pulse 2s ease-in-out infinite;
 animation-composition: add;
}

The @property rule enables animatable custom properties with defined types, unlocking smooth transitions for values that traditional custom properties couldn't animate. This eliminates the need for animation libraries like those often paired with React or Vue applications.

Migration Strategy: Moving from JS Styling to Pure CSS

Assessment

Start by auditing your codebase for JavaScript-driven styling:

• Resize observers for responsive components
• Class manipulation based on state
• CSS-in-JS libraries like styled-components or Emotion
• Dynamic style calculations

Component-Level Migration

Begin migration with isolated components. Replace JavaScript-driven features one at a time:

1. Start with static or rarely-updating components
2. Move to presentational components
3. Handle complex interactive components last

Performance Benefits

• Bundle Size: Remove 10-30KB of CSS-in-JS runtime
• Runtime Performance: No style computation on every render
• Core Web Vitals: Improved LCP, FID, and CLS
• Maintenance: Simpler codebases everyone can understand

Related Resources

For teams using React, consider how modern CSS integrates with your existing components. Our guide on managing React state with Zustand shows how to combine efficient state management with native CSS styling for optimal performance. Additionally, exploring top tools for cleaning CSS can help you establish maintainable CSS architecture as part of your migration.

Sources

1. MDN Web Docs: CSS Container Queries
2. MDN Web Docs: CSS Cascade Layers
3. Can I Use: Container Queries
4. Can I Use: CSS Nesting
5. DEV Community: CSS techniques every developer should know in 2025
6. The New Stack: CSS-in-JS - The Great Betrayal of Frontend Sanity