直接写#3498db导致颜色难以维护，因分散多处、缺乏语义、无法响应深色模式；应统一用:root声明语义化CSS变量（如--color-primary），配合作用域控制、动态读写规范及工具校验，确保全链路一致性。
为什么直接写 #3498db 会让颜色越来越难改
团队协作时，同一个蓝色可能在按钮、边框、文字、背景里重复出现十几次，分散在不同文件甚至不同组件里。某天设计说“主色调浅一点”，你得全局搜索 #3498db，逐个确认是否该改、会不会误伤——漏改一处，UI 就不一致；多改一处，按钮就变紫了。
更麻烦的是，深色模式下同个语义色要切换值，硬编码根本没法条件化切换。
- 颜色值散落在 CSS、JS、Sass 变量、甚至内联样式中
- 十六进制/RGB/HSL 混用，同一语义色出现多种写法（比如
#2c3e50和rgb(44, 62, 80)实际是同一个深灰） - 没有命名约束，
$primary-blue、--main-color、color-brand各叫各的
用 :root + --color-primary 统一声明所有语义色
把颜色按用途（而非数值）定义成自定义属性，放在 :root 块里，确保全局可访问：
:root {
--color-primary: #3498db;
--color-primary-hover: #2980b9;
--color-success: #2ecc71;
--color-warning: #f39c12;
--color-danger: #e74c3c;
--color-text: #2c3e50;
--color-text-secondary: #7f8c8d;
--color-bg: #ecf0f1;
--color-border: #bdc3c7;
}
这样做的关键不是“用了变量”，而是强制建立语义映射：你改的是 --color-primary，而不是某个具体数值。所有用到它的元素自动响应变更。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:root中写具体组件色（如--button-primary-bg），优先用语义名（--color-primary），再由组件决定怎么用 - 深色模式可覆盖：在
@media (prefers-color-scheme: dark)或.dark类里重新赋值--color-bg等 - 值可以是任何合法 CSS 颜色语法：
hsl(200, 100%, 60%)、oklch(65% 0.22 250)，甚至var(--color-primary)嵌套
JS 动态读写 --color-primary 的正确姿势
需要运行时换主题？别用 document.body.style.setProperty('--color-primary', 'red') 直接改 body——这会污染全局，且无法回退。应该操作目标元素或 scoped 容器：
// ✅ 改整个应用主题
document.documentElement.style.setProperty('--color-primary', '#9b59b6');
// ✅ 只改某个卡片区域
const card = document.querySelector('.theme-card');
card.style.setProperty('--color-primary', '#1abc9c');
// ❌ 避免：直接改 body，容易和 :root 冲突，且无作用域
document.body.style.setProperty('--color-primary', '...');
读取时也别依赖 getComputedStyle 返回的 RGB 字符串——它丢失原始语义，且格式不可靠：
- 用
getComputedStyle(document.documentElement).getPropertyValue('--color-primary')获取原始声明值（如#3498db） - 如果要计算明度做对比度判断，用
color-contrast()（实验性）或第三方库解析 HSL - 不要在 JS 里硬编码颜色值，所有颜色逻辑应通过读取
var(--xxx)获取
配合 PostCSS 或构建工具自动校验颜色使用
光靠约定管不住所有人。上线前检查有没有未声明的 --color-xxx 被引用，或者哪些颜色只声明没被用过：
- PostCSS 插件
postcss-custom-properties可展开变量并报错未定义引用 - Vite / Webpack 可用
css-tree扫描所有var(--color-*)，比对:root声明列表 - VS Code 安装插件
CSS Peek，按住 Ctrl 点击var(--color-primary)直跳定义处
真正难的不是写几个 var()，而是让团队所有人只从这一个源头拿颜色——包括设计师给开发的标注稿，也得明确写“请使用 --color-success，勿用 #2ecc71”。否则再好的机制，也会被一次手抖绕过。
