应统一用 CSS 自定义属性管理颜色：在 :root 中声明语义化变量（如 --color-error），组件内仅通过 var() 引用；禁用硬编码颜色值，配合 PostCSS 和 Stylelint 检测非法字面量；组件封装颜色逻辑，禁止外部直接传颜色值；构建时静态校验变量定义完整性。
用 CSS 自定义属性统一管理颜色变量
颜色滥用本质是散落的硬编码值失控。把所有品牌色、语义色（如 --color-error、--color-success）收口到一个 :root 块里，其他地方只允许用 var(--color-primary) 引用。
- 别在组件里写
#007bff或rgb(0, 123, 255)—— 这等于绕过管控 - 变量名要带语义，比如
--color-bg-surface比--color-gray-100更可持续 - 深色模式切换只需重置
:root[data-theme="dark"]下的同一组变量，不用改业务样式
PostCSS 插件拦截非法颜色字面量
光靠约定不够，得让错误在开发时就暴露。用 postcss-custom-properties 配合 postcss-reporter，再加一段自定义规则：扫描所有声明值，匹配十六进制、rgb、hsl 字面量，但排除 var() 调用和已知白名单（如 transparent、currentColor）。
- CI 流程里跑一遍，发现非法值直接报错，不许合入
- 编辑器里装
stylelint+stylelint-color-no-hex规则，实时标红 - 注意：SVG 内联样式、
filter中的drop-shadow(#000)也得覆盖，容易漏
设计系统组件库强制封装颜色逻辑
按钮、卡片、标签这些高频组件，颜色不能由使用者自由传参。比如 <button variant="danger"></button> 应该映射到预设的 --color-danger-bg 和 --color-danger-text，而不是接受一个 color="#e74c3c" 属性。
- 组件内部用
var()，外部只暴露语义化的variant、intent、tone等 prop - 禁止组件提供
style或className让使用者覆盖颜色 —— 这是后门 - Storybook 里每个组件的颜色变体必须显式列出，且对应设计规范文档中的命名
构建时校验 CSS 变量引用完整性
写了 var(--color-warning-border) 却忘了在 :root 定义它？浏览器会静默回退到初始值，导致视觉错乱却无报错。需要在构建阶段做静态分析。
立即学习“前端免费学习笔记（深入）”；
- 用
css-tree解析 CSS AST，提取所有var(--xxx)，再比对:root中声明的变量名集合 - 漏定义的变量名直接抛 warning，CI 中可设为 error
- 注意：动态拼接变量名（如
var(--color-${type}-text)）无法被静态分析捕获，必须禁用
真正难的不是建一套机制，而是让所有人——包括临时支援的外包、刚入职的 juniors、甚至后端偶尔改个按钮样式的人——在按下保存键前，下意识只动那几个变量，不动颜色值本身。这点靠工具拦不住，得靠 PR 模板里固定一行：“本次修改是否新增了未声明的 CSS 颜色变量？□ 是 □ 否”。
