CSS变量继承只看DOM父子关系，不看CSS文件或模块；浏览器沿DOM树向上查找最近声明的祖先节点，与样式来源无关，Shadow DOM需通过:host显式透传，变量名须严格区分大小写且不可用inherit。
CSS变量继承只看DOM父子关系，不看CSS文件或模块
CSS变量（--foo）的继承完全依赖实际DOM节点的嵌套结构，和你把声明写在theme.css、card.module.css还是style属性里毫无关系。浏览器不会读取“模块”概念，它只沿着DOM树往上找最近定义了--foo的祖先元素。
常见错误现象：
-
:root里写了--color: blue，.card里写了--color: red，但子元素始终用blue——大概率是div没加上class="card"，或者用了display: contents导致DOM结构断裂，.card节点根本不在子元素的祖先链上 - 在Shadow DOM里用
var(--size)拿不到:root的值，这不是bug，是设计：宿主元素（如<my-button>）才是Shadow内部的继承起点，:root不在其祖先链中
组件级作用域隔离必须把变量声明在组件根选择器内
想让.card换肤不影响.modal，就不能把--card-bg塞进:root。全局声明等于共享开关，一动全动。
正确做法是把变量直接挂到组件根容器上：
立即学习“前端免费学习笔记（深入）”；
- 用语义化类名作为作用域边界，比如
.user-card { --user-card-bg: #fff; --user-card-text: #333; } - React中可用
data-id动态生成唯一标识：[data-id="abc123"] { --bg: #f0f0f0; }，再在JSX根元素上加data-id={id} - Web Components中用
:host：:host { --card-shadow: 0 2px 4px rgba(0,0,0,.1); }
变量名加命名空间（如--card-bg而非--bg）能显著降低冲突概率，尤其在混用第三方UI库时。
为什么子元素var(--x)取不到值？优先检查这三处
不是语法错，而是继承链断了。打开DevTools → 选中目标元素 → “Computed”面板 → 搜--x，看“Custom Properties”里有没有、来自哪条规则。
- 父元素压根没声明
--x，且var(--x, #000)里的#000生效了（颜色/尺寸没变，其实是fallback在起作用） - 中间某层写了
--x: unset或--x: initial，显式切断了传递（第三方库、重置CSS、甚至某些CSS-in-JS框架会悄悄插一句） - 大小写不一致：父设
--BgColor，子写var(--bgcolor)→ 浏览器当两个变量处理
inherit对--xxx无效，别写--color: inherit试图继承父级变量值；它只对原生CSS属性有意义。
运行时更新变量要操作组件根节点，不是document.documentElement
改document.documentElement.style.setProperty('--color', '#222')看似简单，但所有监听该变量的元素都会重排，性能明显下降。
轻量更新的关键是锁死作用域：
- 用
ref拿到组件最外层DOM节点（如cardRef.current） - 调用
cardRef.current.style.setProperty('--card-bg', '#222') - 确保该节点有明确作用域标识（如
class="card"或data-id），否则更新后变量仍可能被其他组件意外读取
真正容易被忽略的是：变量继承的是定义本身，不是计算结果。比如父设--size: 2em，子元素font-size: var(--size)，这个2em始终按父元素的font-size计算，不是子元素自己的。调试时绕晕人的往往就是这个动态绑定关系。
