# State of CSS 2024：经典 CSS 与新 CSS 时代的转折点 > 深度解析 State of CSS 2024 年度报告，探讨现代 CSS 特性的发展趋势、开发者使用习惯变化，以及从经典 CSS 向新 CSS 时代的重要转变 - 发布于: 2025-06-05 - 原文: https://shanyue.tech/wechat/state-of-css-2024-report/ - 标签: CSS, Web Development, Frontend, Survey, 2024 --- [https://2024.stateofcss.com/en-US](https://2024.stateofcss.com/en-US) State of CSS 2024 年度报告揭示了一个重要趋势：我们正站在"经典 CSS"和"新 CSS"之间的历史转折点上。这份来自全球开发者的调查报告不仅反映了当前 CSS 生态系统的现状，更预示着前端开发方式的根本性变革。 ![State of CSS 2024 主页](https://shanyue.tech/state-of-css-2024-homepage.png) 报告指出，**经典 CSS** 时代的特征是开发者需要依赖外部工具来弥补语言本身的局限性，包括 CSS 预处理器、后处理器以及各种框架库。而 **新 CSS** 时代则通过原生特性如 `Subgrid`、`:has()` 选择器、CSS 变量和容器查询等，让开发者能够摆脱对外部工具的依赖，甚至承担一些原本需要复杂 JavaScript 解决方案的任务。 --- ## CSS 特性使用情况分析 根据 2024 年的调查数据，现代 CSS 特性的采用率呈现显著上升趋势。**容器查询（Container Queries）** 作为最受关注的新特性之一，让开发者能够基于容器尺寸而非视口尺寸来应用样式，这从根本上改变了响应式设计的思维模式。 `:has()` **伪类选择器** 被开发者们称为"父选择器"，它填补了 CSS 中长期存在的功能空白。通过 `:has()`，开发者可以基于元素的子元素状态来设置父元素样式，这在以往需要复杂的 JavaScript 逻辑才能实现。 **CSS Subgrid** 的支持度也在快速提升，它让网格布局的嵌套变得更加灵活和强大。开发者现在可以让子网格继承父网格的轨道定义，解决了许多复杂布局场景中的痛点问题。 ![CSS 特性使用情况](https://shanyue.tech/state-of-css-2024-features.png) --- ## 开发工具与方法论变迁 传统的 CSS 开发工作流正在经历重大变革。**CSS 预处理器**如 Sass 和 Less 的使用率开始下降，因为 CSS 原生变量、嵌套语法和其他现代特性已能满足大部分开发需求。这种变化反映了开发者对简化工具链的渴望。 **原子化 CSS** 框架如 `Tailwind CSS` 继续保持强劲增长势头，但值得注意的是，开发者们开始更多地结合使用原子化框架和原生 CSS 特性。这种混合模式让开发者既能享受快速原型设计的便利，又能利用现代 CSS 的强大功能。 PostCSS 等后处理器工具的角色也在发生变化，从弥补浏览器兼容性缺陷转向提供开发体验优化，如自动添加厂商前缀和代码压缩等功能。 ![CSS 使用情况统计](https://shanyue.tech/state-of-css-2024-usage.png) --- ## 浏览器支持与兼容性演进 2024 年最显著的变化是主流浏览器对现代 CSS 特性支持的**高度一致性**。Chrome、Firefox、Safari 和 Edge 在新特性实现方面的协调程度达到了前所未有的水平，这得益于浏览器厂商重新承诺要让新特性真正发挥作用。 **Baseline 2023** 倡议的推出为开发者提供了明确的特性可用性指南，当一个 CSS 特性在所有主流浏览器中都获得支持时，它就会被标记为"Baseline"。这大大降低了开发者在选择是否使用新特性时的心理负担。 容器查询、`:has()` 选择器等关键特性已经实现了广泛的浏览器支持，让开发者可以放心地在生产环境中使用这些功能，而无需担心兼容性问题。 --- ## 未来发展趋势与展望 State of CSS 2024 报告显示，我们才刚刚触及新 CSS 所能提供的一切的表面。即将到来的特性包括**CSS 锚点定位（Anchor Positioning）**、**嵌套语法的完全原生支持**以及更强大的**逻辑属性系统**。 这些发展趋势表明，CSS 正在从一个相对简单的样式语言演进为一个功能完备的布局和交互系统。开发者们需要调整学习策略，更多地关注 CSS 原生特性的掌握，而非依赖第三方工具的使用技巧。 对于团队和组织而言，这意味着需要重新评估技术栈选择，考虑如何平衡现代 CSS 特性与现有工具链的关系，以及如何培训团队成员适应这种技术范式的转变。