CSS 自定义属性

自定义属性保存可在 CSS 中继承和替换的 token。它们适合表达颜色、间距、圆角和组件主题，而不是把所有业务状态都塞进字符串变量。

:root {
  --color-accent: #2457d6;
  --space-card: 1rem;
}
.card {
  color: var(--color-accent);
  padding: var(--space-card);
}

自定义属性在声明值阶段保存原始 token，var() 使用时才替换；变量未定义时可以提供回退值：var(--color-accent, currentColor)。变量会继承，因此组件局部覆盖可以形成主题范围；无效值可能在最终计算阶段让整条声明失效，要用回退和 DevTools 的 Computed 值检查。

实验与练习

在根元素定义主题 token，再在卡片容器覆盖同名变量。删除 token、写入无效值并添加回退，分别观察继承、回退和声明失效。把颜色 token 换成间距 token，说明变量本身不携带类型。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 把自定义属性当作 JavaScript 变量，期待自动计算业务状态。
• 忘记变量会继承，导致局部覆盖影响深层组件。
• 使用 var() 却不给关键主题提供可接受的回退。

继续阅读

变量解决值的复用，下一篇解决样式来源的优先级：层叠层与作用域。

练习

1. 用最小输入复现“CSS 自定义属性”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案