这两年，CSS 可以说是“狂飙”式发展，不断带来各种实用的新特性。很多过去需要借助 Sass、JS 或者奇怪 hack 的场景，现在用原生 CSS 就能轻松实现。最近，《The State of CSS 2025》公布了最新调查结果，我们就来看看 CSS 在 2025 年的现状，以及其中最受欢迎的新特性。

最受欢迎的 CSS 新特性
:has() —— 父选择器
过去 CSS 无法选父元素，现在 :has() 让你可以根据子元素或后代的存在来选中父级。

/* 给包含错误提示的表单控件加红色边框 */
.form-group:has(.error) {
  border: 1px solid red;
}

支持：Chrome 105+、Safari 15.4+、Edge 105+、Firefox 121+

aspect-ratio —— 固定宽高比
用来直接控制元素的宽高比例，解决了多年来的“16:9 宽高比”难题，不再需要 padding hack。

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ddd;
}

支持情况：主流浏览器都支持。

scroll-behavior —— 平滑滚动
控制页面或容器的滚动是否平滑。

html {
  scroll-behavior: smooth;
}

支持情况：主流浏览器都支持。

backdrop-filter —— 毛玻璃背景
给元素后面的背景加滤镜（模糊、对比度等）。

.modal {
  backdrop-filter: blur(8px);
}

支持情况：主流浏览器都支持。

CSS 原生嵌套
写法更接近 Sass，CSS 终于原生支持嵌套：

.card {
  padding: 1rem;

  & h2 {
    font-size: 1.25rem;
  }

  &:hover {
    background: #eee;
  }
}

支持情况：Chrome 112+、Safari 16.5+、Firefox 117+。

新的视口单位 lvh / svh / dvh
解决移动端 100vh 被地址栏遮挡的问题。
•lvh = Large viewport height（最大高度）
•svh = Small viewport height（最小高度）
•dvh = Dynamic viewport height（动态随地址栏变化）

.hero {
  height: 100dvh; /* 始终与当前视口高度一致 */
}

支持情况：Chrome 108+、Safari 15.4+、Firefox 111+。

text-wrap: balance —— 标题更好看
让多行文字更平均地换行，避免“一行太长一行太短”。

h1 {
  text-wrap: balance;
}

支持情况：Chrome 114+、Safari 16.4+、Firefox 125+。

Subgrid —— 子网格布局
子元素的 grid 可以继承父网格的行列轨道。

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格列 */
}

支持情况：Firefox 最早支持；Chrome 117+、Safari 16.2+ 也已支持。

color-scheme —— 系统深浅色模式
告诉浏览器页面支持暗色模式，表单控件和滚动条会自动适配。

:root {
  color-scheme: light dark;
}

支持情况：现代浏览器均支持。

light-dark() —— 一行写主题色
根据当前模式选择不同的颜色。

body {
  background: light-dark(#fff, #000);
}

支持情况：Chrome 120+、Safari 16.4+、Firefox 123+。
shape() —— 灵活的形状定义
定义裁剪或排版区域，可以取代 clip-path 的部分功能（实验性）。

.image {
  clip-path: shape(circle at center, 50%);
}

if() —— CSS 条件判断（实验性）
允许在 CSS 里写条件逻辑。

.box {
  width: if(var(--wide) = true, 400px, 200px);
}

CSS 相关工具
CSS 框架
Tailwind CSS 继续遥遥领先。

CSS-in-JS
CSS Modules 使用最广，其次是 Styled Components。不过，Styled Components 作者已宣布停止维护，某种程度上也代表 CSS-in-JS 的热潮在退去。

预处理器/后处理器
Sass 依然在用，但随着 CSS 内置功能越来越多（变量、嵌套、颜色函数…），预处理器的重要性逐渐下降。

实用工具

写在最后
回顾这两年，可以说 CSS 正在迎来一个黄金时代：
•开发者体验在快速提升：原生支持嵌套、父选择器、深浅色模式，让很多老大难问题迎刃而解。
•和 JS 的边界在变化：过去需要 JS 才能实现的交互（轮播、条件逻辑），现在 CSS 草案里都有答案。
•预处理器逐渐“退居二线”：CSS 自己在不断长大，Sass、LESS 这些工具不再是必需品。
对于前端开发者来说，现在是一个非常值得“重新认识 CSS” 的时刻。或许在不远的将来，写页面布局和交互，我们真的只需要 CSS。