CSS变量通过:root定义可复用颜色等值，如--primary-color: #3498db;，全局用var(--primary-color)引用；需注意作用域、IE兼容性（加fallback）、JS动态修改及语义化命名规范。
怎么把颜色从写死改成可复用的变量
直接把 #3498db 这类值塞进每个 color、background-color 里，改一次得全局搜，还容易漏。CSS 变量（custom properties）就是干这个的：定义一次，多处引用，改一个地方全生效。
在 :root 里声明最稳妥，确保全局可访问：
:root {
--primary-color: #3498db;
--text-light: #f5f5f5;
--border-radius-sm: 4px;
}
之后所有地方用 var(--primary-color) 替代硬编码值。注意变量名必须以两个短横线 -- 开头，否则无效。
为什么 var() 有时不生效或报错
常见原因不是语法错，而是作用域或继承问题。CSS 变量是**级联的**，不是全局常量 —— 它只在声明它的选择器及其后代里有效。
立即学习“前端免费学习笔记（深入）”；
-
:root是顶层作用域，适合放主题色；但如果你在.card里定义了--card-bg，那只能在.card及其子元素里用var(--card-bg) - 变量未定义时，
var(--missing)默认返回空值，导致样式失效（比如背景变透明），不会报错也不提示 - 不能在
@keyframes或@media外部直接用变量做条件判断（CSS 不支持逻辑运算） - IE 完全不支持 CSS 变量，如果要兼容，得配 fallback 值：
color: #3498db; color: var(--primary-color);
如何配合 JavaScript 动态切换主题色
CSS 变量的优势在于能被 JS 读写，实现运行时换肤，不用切整套样式表。
读取当前值：
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
修改值（比如切换暗色模式）：
document.documentElement.style.setProperty('--primary-color', '#2c3e50');
关键点：
- 必须操作
document.documentElement（即:root元素），不是document.body - JS 设置的是内联样式级变量，会覆盖
:root中的声明，优先级更高 - 避免频繁调用
setProperty，可批量更新后触发一次重绘，或用 CSSOM 批量写入
变量命名和维护要注意什么
起名不是越简短越好，而是要表达语义+层级。写成 --blue-500 看似方便，但一旦设计系统升级，蓝色换了，这个变量名就失真了。
推荐按用途分层命名：
-
--color-primary（主色，业务含义） -
--color-primary-hover（交互态） -
--spacing-md（非--s-16这种缩写） -
--shadow-card（组件级抽象，比--shadow-2更易维护）
另外，别把变量当“魔法数字”滥用 —— 比如用 --z-index-modal: 1050 没问题，但用 --delay: 0.3s 做动画时间，后期难追溯用途。这类值建议保留在具体规则里，除非多个组件强依赖同一时长。
真正麻烦的从来不是加变量，而是团队里有人改了 --color-primary 却没同步设计稿、没通知下游组件库、也没跑视觉回归 —— 这时候变量反而放大了不一致。所以变量本身只是工具，配套的规范和协作流程才是关键。
