css变量作用域由定义位置决定，仅在声明选择器及其后代中生效；var()向上查找最近有效定义而非继承父元素值，不依赖dom深度或语义归属，查找失败则返回fallback。
因为 var() 查找的是“最近有效定义”，不是“父元素当前值”；变量本身不继承，查找行为才继承——这和传统 CSS 继承逻辑完全不同，容易误判作用域边界。
var() 向上查找 ≠ 继承父元素的计算值
你写 .card { --color: red; }，然后 .card > .btn { color: var(--color); }，看起来是“继承”，实际是浏览器从 .btn 开始向上遍历 DOM，找第一个声明了 --color 的祖先选择器。如果中间某层写了 .card__header { --color: blue; }，那 .card__header > .btn 就会拿到 blue，哪怕它视觉上在 .card 里。
- 查找路径只看选择器是否匹配、是否已生效，不看 DOM 深度或“语义归属”
- 没匹配到任何定义时，
var(--x)返回 fallback（如果有）或无效值，不会退回到上一级容器 - 媒体查询里的重定义只影响该选择器及其后代，不会“污染”同级其他实例
全局定义 + 多处复用 = 渲染抖动高发区
当 :root { --theme-color: #3b82f6; } 被 200 个元素通过 color、border-color、box-shadow 同时引用，JS 每次调用 document.documentElement.style.setProperty('--theme-color', ...)，浏览器就得重新计算所有依赖节点的样式树，触发批量重排重绘。
- Performance 面板里
Recalculate Style时间 > 5ms 且节点数超 1000，基本可确认是变量大面积继承导致 - 用 Elements 面板点开任意一个
var(--theme-color)元素，在 Computed → “Used by” 列看到几十上百条，就是危险信号 - 节流比优化写法更有效：用
requestIdleCallback包裹更新，或改用 IntersectionObserver 批量判断后再统一设值
组件内变量名没加前缀 = 隐形冲突源
你在 :root 定义了 --primary，又在第三方组件库（如 Element Plus）里看到 --button-primary-color: var(--primary)，那只要一改 --primary，所有按钮、输入框、标签的颜色全跟着变——哪怕你只想调暗卡片标题。
- 真正可控的做法是：把变量注入到有明确边界的容器上，比如
.user-card { --card-primary: #1a1a1a; } - 组件内部尽量不依赖外部变量，或只依赖自己命名空间下的，例如
--button-primary-color: var(--button-primary) - 禁用
all: unset在变量定义层使用——它会清空整个继承链，让var()查找直接断掉
最易被忽略的一点：问题往往不出在“怎么写变量”，而出在“谁该负责定义它”。CSS 变量的作用域本质是选择器作用域，不是 DOM 作用域；写在哪，就只管哪一层的后代，不会自动“穿透”或“广播”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
