直接写#4A90E2会导致后期改色崩溃，因其将样式逻辑与视觉值硬编码耦合；应使用CSS变量在:root中定义--color-primary等语义化变量实现解耦与全局复用。

为什么直接写 #4A90E2 会导致后期改色崩溃

项目刚起步时随手写 #4A90E2 看着挺快，但只要主题色要换、要出暗色模式、要支持多品牌定制，就会发现：按钮背景、边框、文字、图标、loading 动画……全得手动搜替换。漏一个，UI 就不一致；搜错一个（比如把注释里的颜色也替了），页面就变紫。

根本问题不是“懒”，是硬编码颜色值把样式逻辑和视觉值耦合死了。CSS 变量就是解耦的最小成本方案。

怎么用 :root 定义基础色并全局复用

在全局样式文件（如 styles.css 或 main.css）顶部定义，确保所有组件都能继承：

:root {
  --color-primary: #4A90E2;
  --color-primary-hover: #357ABD;
  --color-text: #333;
  --color-text-secondary: #666;
  --color-border: #DDD;
  --color-bg: #FFF;
}

之后所有地方直接用 var(--color-primary)，而不是再写十六进制：

.btn {
  background-color: var(--color-primary);
  border-color: var(--color-border);
}
.btn:hover {
  background-color: var(--color-primary-hover);
}
.text-muted {
  color: var(--color-text-secondary);
}

注意：:root 是伪类，作用域等同于 html 元素，优先级高、天然全局可访问，不用额外加 !important。

暗色模式下怎么切换整套颜色而不重写 CSS

别新建一套 class 写满 background: #1E1E1E —— 直接覆盖 :root 下的变量即可：

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1E1E1E;
    --color-text: #EEE;
    --color-text-secondary: #AAA;
    --color-border: #444;
  }
}

或者用 JS 切换主题时动态改属性：

document.documentElement.style.setProperty('--color-bg', '#121212');

关键点：var() 是实时计算的，只要变量值变了，所有用到它的样式自动更新，无需重新渲染 DOM 或加 class。

变量命名和组织容易踩的三个坑

• 别用语义模糊名，比如 --blue 或 --main —— 改成 --color-primary，明确用途而非色值
• 别把所有颜色塞进 :root —— 抽离「语义色」（--color-success）和「基础色」（--color-blue-500），前者用于组件，后者用于设计系统扩展
• 别在组件里重复定义同名变量（如 .card { --color-primary: red; }）—— 除非真需要局部覆盖，否则会污染继承链，调试时难以追踪来源

真正难的不是写变量，是建立团队共识：哪些变量必须统一、哪些允许局部微调、谁负责维护主色板。哪怕只有两个人协作，也值得花 10 分钟对齐命名规则。