直接写#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 分钟对齐命名规则。
