推荐将重复颜色提取为CSS自定义属性，在:root中语义化命名（如--color-primary），全局统一管理；组件中用var()引用，支持降级与局部覆盖；大型项目可按基础色、语义色、场景色分层，并借助工具增强能力。
把重复使用的颜色提取成 CSS 自变量（Custom Properties），是最直接、最推荐的解法。这样改一处，全局生效，语义清晰，也方便主题切换。
用 :root 定义全局颜色变量
在 :root 里集中声明常用色值，命名尽量语义化（比如 --color-primary 而不是 --color-blue-500），便于后期理解与维护。
- 推荐写法：
:root {
--color-primary: #2a5fec;
--color-success: #4caf50;
--color-warning: #ff9800;
--color-danger: #f44336;
--color-bg: #ffffff;
--color-text: #333333;
}
- 避免在多个选择器里重复定义同一变量；
- 变量名统一加前缀（如
--color-）可减少冲突，也利于 IDE 自动补全。
在组件中使用 var() 引用变量
替换原来硬编码的颜色值，用 var(--color-primary) 替代 #2a5fec。
立即学习“前端免费学习笔记（深入）”；
- 支持降级：可以加 fallback 值，比如
color: var(--color-text, #333);； - 支持动态计算：
background-color: hsl(var(--hue), 70%, 60%);（需配合 CSS HSL 变量）； - 局部覆盖也很方便：某个组件想换主色，直接在该组件选择器里重设
--color-primary即可。
按用途分层管理变量（进阶）
大型项目可进一步拆分变量层级，提升可维护性：
-
基础色板（base）：定义原始色值，如
--blue-50~--blue-900； -
语义色（semantic）：基于基础色组合出业务含义，如
--color-primary指向--blue-600； -
场景色（context）：如
--color-card-bg、--color-input-border，和具体 UI 元素绑定。
这样即使设计系统升级，只需调整语义层映射，业务代码几乎不用改。
配合构建工具或预处理器增强能力
CSS 变量本身不支持嵌套或逻辑运算，但可借助工具补足：
- PostCSS 插件（如
postcss-css-variables）能在构建时静态解析变量，兼容旧浏览器； - Sass/Less 中先用预处理变量组织颜色，再导出为 CSS 变量，兼顾开发体验与运行时灵活性；
- 搭配 Design Token 工具（如 Style Dictionary）可实现多平台（Web/iOS/Android）颜色同步。
不复杂但容易忽略。关键是迈出第一步：从最常改的 3–5 个颜色开始抽离，后续逐步沉淀体系。
