CSS变量因级联生效而非局部作用域，易在多组件间互相覆盖；应通过唯一类名前缀限定作用域，避免全局污染和冲突。
CSS变量为什么会在不同组件里互相覆盖
CSS变量（--color-primary这类）是级联生效的，不是局部作用域——它遵循CSS继承和层叠规则，而不是JS里let那种块级作用域。所以当你在:root定义一个--bg，又在某个.card里重定义，只要DOM结构里.card是:root后代，且样式表加载顺序靠后，它的值就会被覆盖；但如果多个组件都用.card类、又没加命名空间，就真会打架。
- 常见错误现象：
Button组件设了--border-radius: 4px，Modal组件也设同名变量但要8px，结果全局按钮圆角变大了 - 根本原因：没有隔离变量的作用边界，依赖选择器权重和加载顺序“赌赢”
- 不是浏览器bug，是CSS变量设计本意——它就是为动态主题、运行时换肤服务的，天然支持“从外往里透传+局部覆盖”
用特定类名限定变量作用域最稳妥的做法
别指望@scope（还没进主流浏览器），现在最可靠的是靠类名前缀+选择器层级控制变量生效范围。核心思路：让变量只在带明确命名空间的容器内生效，不泄漏、不干扰。
- 给每个独立UI模块加唯一类名前缀，比如
.mylib-button、.mylib-modal - 变量声明写在该类选择器下，而不是
:root或html：.mylib-button { --button-height: 32px; } .mylib-modal { --button-height: 40px; /* 不影响 .mylib-button */ } - 组件内用
var(--button-height)时，浏览器会从当前元素向上找最近的、定义了该变量的祖先，自然隔离 - 避免用
!important覆盖变量——它会让后续任何重写失效，破坏可维护性
为什么不能只靠:root + data-theme解决冲突
单靠:root[data-theme="dark"]这种切换主题的方式，只能解决“明暗模式”一类全局状态，无法处理“同一页面多个独立组件库共存”的场景。一旦两个第三方组件都往:root写--primary-color，谁后加载谁赢，毫无可控性。
- 典型问题：
antd和element-plus同时引入，都依赖--color-primary，但值不同，必然冲突 - 参数差异：主题变量是“状态维度”，而组件变量是“封装维度”，二者正交，不该混用
- 性能影响：把所有变量塞进
:root，会导致每次修改都要重算整个文档的CSS变量依赖链，尤其在复杂SPA里可见卡顿 - 兼容性提醒：
data-属性方案在IE11里可用，但:root本身IE11支持，变量值若含calc()或hsl()等新语法仍需检查
重写变量时最容易忽略的继承细节
CSS变量继承的是“计算后的值”，不是声明语句。这意味着父元素设--size: 1em，子元素font-size: 20px，那子元素里var(--size)其实是20px，不是1em——这个隐式转换常导致尺寸错乱。
立即学习“前端免费学习笔记（深入）”；
- 容易踩的坑：在
.card-header里设--padding: 1rem，但.card本身font-size被缩放过，结果1rem实际像素值变了，却以为变量“没生效” - 正确做法：对需要绝对单位的变量（如
--gap、--border-width），直接用px或rem固定基准，别依赖em继承链 - 调试技巧：Chrome DevTools里选中元素 → “Computed”面板 → 搜索
--your-var，看“Value”列显示的是哪个节点提供的值，比猜快得多
变量不是写完就完事，得盯着它在具体DOM路径上到底被谁定义、被谁继承、被谁覆盖——这才是真正落地时最花时间的地方。
