本条目来自前端检查清单，主题是「用 CSS 自定义属性（CSS 变量）管理设计令牌」。
用途：样式表中硬编码的颜色、间距和字号等值分散在多个文件时，做品牌换色、暗色模式或调整间距需要逐行查找与修改。自定义属性可将这些值集中管理，一处修改即可全局生效，并能实现预处理器变量无法做到的运行时主题化。
主要能力与要点：
- 在 :root 上用 --variable-name 定义可复用值；
- 自定义属性遵循级联与继承，可在任意作用域内被覆盖；
- 使用 var(--name, fallback) 提供回退值；
- 自定义属性是运行时值，JavaScript 可以读取和写入。
使用方式（对应检查项提供的四种操作）：
- Check：在 CSS 文件中找出应替换为自定义属性的硬编码颜色、间距和字号；
- Fix：把重复且有意义的取值抽取为 :root 上的自定义属性，并将所有使用处改为 var() 引用；
- Explain：解释自定义属性与预处理器变量的区别、级联与继承的工作方式，以及如何用于主题化；
- Code Review：审查样式表、组件样式和响应式状态，指出渲染界面中违反该规则的具体选择器、声明或断点。
适用场景：需要统一设计令牌、支持明暗主题、进行大规模视觉调整或希望由 JavaScript 动态改变主题的前端项目。
限制：资料未提供浏览器兼容范围、性能数据、具体代码示例或框架专属写法；完整实现细节、代码示例与框架相关指引需查看 references/rule.md。
规则页面：https://frontendchecklist.io/rules/css/css-custom-properties