CSS自定义属性是统一管理颜色的最佳实践，通过:root定义语义化变量（如--color-primary）、配合hsl()/oklch()推导变体、JSON+构建脚本实现跨平台维护，并需规避作用域陷阱与直写色值。
用 CSS 自定义属性统一管理颜色值
直接在 :root 中定义颜色变量，是最轻量、兼容性最好（Chrome 49+、Firefox 31+、Safari 9.1+）的去重方式。所有组件、主题、状态色都从这里取值，改一处，全局生效。
-
--color-primary: #3b82f6;这类命名要带语义，避免--blue-500这种仅描述外观的写法，否则换主题时需批量重命名 - 深色模式适配可配合
@media (prefers-color-scheme: dark)覆盖变量值，无需 JS 干预 - 注意：CSS 变量不支持 IE，若需兼容，得搭配 PostCSS 插件（如
postcss-css-variables）做编译时降级
用 hsl() 或 oklch() 实现函数式颜色推导
硬编码十六进制色值会锁死色系关系，而 hsl() 允许你基于主色动态生成悬停、禁用、背景等变体，oklch()（现代浏览器支持中）则更符合人眼感知均匀性。
- 悬停变暗：
hsl(var(--h), var(--s), calc(var(--l) - 10%))，比写死#2563eb更易维护 - 禁用态透明化：用
color-mix(in srgb, var(--color-text) 60%, transparent)（Chrome 111+）比rgba(0,0,0,0.38)更语义清晰 - 避免用
lighten()/darken()Sass 函数——它们操作的是 HSL 模型但算法不一致，跨工具易出偏差
构建颜色 Token JSON + 构建时注入 CSS 变量
当设计系统变大，颜色需跨平台（Web/iOS/Android）、支持多主题、或对接 Figma 插件时，手写 :root 就不可持续。此时应把颜色定义抽成 JSON 文件，再通过构建脚本注入 CSS。
- JSON 示例结构必须扁平：
{ "primary": "#3b82f6", "primary-hover": "hsl(210, 75%, 45%)", "surface": "#ffffff" } - 用
postcss-custom-properties或自写 Vite 插件读取 JSON，生成对应--color-primary等变量，避免手动同步错误 - 关键点：JSON 中不要存「计算逻辑」（如
"primary-light": "lighten(primary, 10%)"），只存最终值或标准格式表达式（如hsl()字符串），否则构建链路会耦合预处理器
警惕 CSS 变量作用域与继承陷阱
变量不是常量，它依赖作用域和继承链。看似统一的颜色定义，可能因选择器权重或局部重定义失效。
立即学习“前端免费学习笔记（深入）”；
- 避免在组件内部用
.btn { --color-primary: red; }覆盖全局变量——这会让其他依赖该变量的子组件意外变色 - 透明度慎用
rgba()写死值：比如--color-text-disabled: rgba(0, 0, 0, 0.38)，一旦根色变更（如换深色主题），这个灰度就不再匹配；应改用color-mix()或 HSL 的 L 值调节 - 调试技巧：在 DevTools 中选中元素，右侧 Styles 面板搜索
--color，看变量实际解析值，确认是否被意外覆盖或未继承
颜色管理最难的不是怎么写，而是让所有人（设计师、前端、构建流程）对同一套 token 命名和更新规则达成共识，并守住“不直接写十六进制”的底线。一旦有人绕过变量直写 #ef4444，整条链就断了。
