CSS Grid, subgrid, and container queries are now mainstream, enabling responsive, modular designs based on container size rather than viewport; 2. Native CSS nesting is widely supported, reducing reliance on preprocessors and improving maintainability; 3. Utility-first CSS (e.g., Tailwind) remains dominant but is evolving with JIT, arbitrary values, and hybrid approaches combining utilities with custom components; 4. CSS custom properties are central to design systems, enabling dynamic theming, dark mode, and accessibility via prefers-color-scheme and JavaScript integration; 5. Performance awareness is rising, with unused CSS detection, critical inlining, code-splitting, and scoped styles via @scope improving efficiency; 6. Preprocessors like Sass are declining as native CSS features catch up, though they persist in legacy enterprise environments; overall, CSS in 2024 is a mature, powerful language embracing modularity, performance, and developer experience without requiring frameworks or build steps.

2024 has cemented CSS as a more powerful and capable language than ever—no longer just a styling tool, but a full-fledged part of modern web development workflows. With new features shipping in browsers, better developer tooling, and growing adoption of modern methodologies, the state of CSS reflects a maturing ecosystem that balances innovation with practicality.

Here’s a look at the key trends, tools, and shifts shaping CSS this year.

1. Modern Layouts Are Now Mainstream

The days of relying on floats or even Flexbox for everything are fading. In 2024, CSS Grid and subgrid are widely supported and used in production. But the real game-changer has been the broader adoption of container queries, which shipped natively in all major browsers.

• Container queries allow components to adapt based on their container’s size, not just the viewport—making them perfect for reusable UI components in design systems.
• Developers are pairing them with @container rules and size features to create truly modular designs.
• Example: A card component can switch from horizontal to vertical layout when its parent is narrow—without needing JavaScript or wrapper classes.

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

@container (max-width: 300px) {
  .card {
    flex-direction: column;
  }
}

Alongside this, aspect-ratio is now standard, simplifying responsive media and grid items without hacks.

2. CSS Nesting Is (Finally) Native

One of the most requested features—native CSS nesting—is now supported in Chrome, Safari, and Firefox behind a flag (expected full rollout in 2024). This reduces reliance on preprocessors like Sass for basic nesting.

.card {
  padding: 1rem;

  &__title {
    font-size: 1.25rem;
  }

  &:hover {
    background: #f5f5f5;
  }
}

While it uses the & syntax familiar to Sass users, it's still limited compared to preprocessors (no mixins or functions). Still, this is a big step toward cleaner, more maintainable CSS without build steps.

Many teams are starting to adopt it cautiously, especially in projects using newer frameworks like Astro or plain HTML/CSS setups.

3. Utility-First CSS Still Dominates (But Evolves)

Tailwind CSS remains the most popular utility-first framework, but 2024 sees growing competition and refinement:

• Windi CSS and UnoCSS are gaining traction for their speed and flexibility, especially in Vite-based projects.
• Tailwind itself has improved with Just-in-Time (JIT) by default, smaller bundles, and better customization via theme() and plugins.
• More teams are using arbitrary values (w-[237px], bg-[#ff3e82]) for one-off styles without leaving HTML.

However, pushback continues from developers concerned about semantics and maintainability. As a result, we're seeing a rise in hybrid approaches—using utility classes for layout and structure, but custom classes for complex components.

4. CSS Custom Properties Are Core to Design Systems

CSS variables (custom properties) are no longer experimental—they're central to theming, dark mode, and dynamic styling.

In 2024, teams are using them more systematically:

• Scoped variables within :root, components, or even media queries.
• Integration with JavaScript for runtime theme switching.
• Prefers-color-scheme and prefers-reduced-motion paired with variables for accessibility.

:root {
  --text-primary: #1a1a1a;
  --bg-primary: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e0e0e0;
    --bg-primary: #121212;
  }
}

Tools like Style Dictionary or Theo help sync design tokens across platforms, making CSS variables part of a larger design engineering workflow.

5. Performance and Bundle Awareness Are Rising

With web performance still critical, developers are more cautious about CSS bloat.

• Unused CSS detection is now built into Chrome DevTools and Lighthouse, pushing teams to audit styles.
• CSS scope isolation via @scope (emerging feature) is being tested as a way to safely remove or lazy-load styles.
• Critical CSS inlining and code-splitting via build tools (like Webpack or Vite) are standard in SSR and SSG apps.

There’s also a quiet shift back toward smaller, focused stylesheets—some teams are even abandoning global frameworks in favor of hand-written CSS for performance-sensitive apps.

6. The Preprocessor Debate Is Fizzling Out

Sass usage is declining—not because it’s bad, but because native CSS is catching up.

• Nesting, variables, and calculations (calc(), clamp()) now work without compilation.
• Developers are opting for post-processors like PostCSS with plugins (e.g., postcss-preset-env) to use future CSS today.
• Build-free workflows (e.g., in Astro, Eleventy) favor native CSS with minimal tooling.

That said, Sass still holds strong in large enterprises with legacy codebases and complex theming needs.

Final Thoughts

CSS in 2024 is more capable, performant, and developer-friendly than ever. The language is evolving to solve real-world problems—modular design, responsiveness, theming, and performance—without always needing JavaScript or frameworks.

The trend is clear: leaner tooling, smarter native features, and a focus on maintainability. Whether you're using utility classes, writing plain CSS, or building design systems, the fundamentals matter more than ever.

Basically, CSS is growing up—and developers are finally giving it the respect it deserves.

The above is the detailed content of The State of CSS in 2024. For more information, please follow other related articles on the PHP Chinese website!