CSS变量是统一管理颜色最灵活可维护的方案，应按用途语义化命名如--color-primary，并集中定义在:root；组件中用var()引用，支持多主题切换与设计系统落地。
用 CSS 变量（Custom Properties）统一管理颜色，是目前最灵活、可维护性最强的方案。它不依赖构建工具，原生支持，还能动态切换主题。
定义一套语义化颜色变量
别直接写 --primary-red: #ff4757 这类带具体色值和名称的变量，容易后期难替换。应该按用途命名，比如：
- --color-primary：主品牌色（按钮、重要链接）
- --color-success：操作成功态（如保存成功提示）
- --color-text-primary：正文主要文字色
- --color-bg-surface：卡片/模块背景色
- --color-border-divider：分隔线或边框色
把它们集中写在 :root 或一个单独的 colors.css 文件里，全项目可复用。
在组件中使用变量，而非硬编码色值
所有样式都通过 var(--color-primary) 引用，而不是写死 #007bff。例如：
立即学习“前端免费学习笔记（深入）”；
.btn-primary {
background-color: var(--color-primary);
color: var(--color-text-on-primary, white);
}第二参数 white 是 fallback 值，兼容不支持 CSS 变量的极旧浏览器（基本可忽略），但写上更稳妥。
支持多主题切换（暗色/高对比度/品牌定制）
不同主题只需覆盖同一套变量：
/* 默认浅色主题 */
:root {
--color-bg-surface: #ffffff;
--color-text-primary: #333333;
}
/ 暗色主题 /
[data-theme="dark"] {
--color-bg-surface: #1e1e1e;
--color-text-primary: #f0f0f0;
}
JS 切换 document.documentElement.dataset.theme = 'dark'，样式立刻响应，无需重写整套 CSS。
配合设计系统落地，避免“变量泛滥”
容易犯的错是每个页面都定义一堆局部变量，导致失控。建议：
- 只在
:root定义**基础语义色**（不超过 12 个） - 禁止在组件内部重复定义同名变量（除非明确要局部覆盖）
- 用 CSS 预处理器（如 Sass）做色板生成辅助（比如从
--color-primary自动生成--color-primary-light），但最终仍以 CSS 变量为唯一信源 - 在团队规范中明确变量命名规则和使用边界
基本上就这些。CSS 变量不是银弹，但它让颜色体系真正变得可读、可查、可配、可换 —— 不复杂，但容易忽略。
