css变量不继承，var()沿dom向上查找最近生效定义；应将变量定义在组件根元素（如.user-card）实现局部作用域，避免:root全局污染；all: unset仅适用于不可控第三方内容兜底，非解决变量冲突方案。
CSS变量本身不继承，但var()查找行为会沿着DOM树向上找最近定义——这常被误认为“继承混乱”，其实是作用域没划清。
为什么var(--color)在子元素里读不到或读错值
根本不是语法错误，而是变量定义位置脱离了目标元素的查找路径。浏览器执行var()时，只看当前元素及其祖先节点中，**谁最近定义了该变量**，且该定义必须已生效（样式表加载顺序、选择器匹配成功）。
- 在
:root定义--text-primary，所有后代都能读到——但改一次就全页面响应，无法局部隔离 - 在
.card里定义--text-primary: #333，那只有.card > *能读到；兄弟节点或父节点完全不可见 - 如果
.card__header又写了--text-primary: #666，它内部的h3读到的就是#666，不是.card设的#333 - JavaScript调用
el.style.setProperty('--x', 'v')没传第二个参数node，默认写入:root，等于全局污染
如何用容器级CSS变量建立真正局部作用域
不要把变量塞进:root赌层级和顺序，而要把变量“钉”在有明确边界的组件根元素上。这样var()查找自然受限，无需手动拦截。
- 给每个独立模块加唯一类名前缀，如
.user-card、.product-list - 变量声明直接写在该类选择器下：
.user-card { --text-primary: #1a1a1a; --border-radius: 8px; } - 组件内所有子元素直接用
color: var(--text-primary)，不用管它从哪来 - 媒体查询重写也只影响这个容器：
@media (prefers-color-scheme: dark) { .user-card { --text-primary: #f0f0f0; } } - 避免通用变量名，用
--user-card-text-primary比--primary更安全，尤其多组件库共存时
什么时候该用all: unset？别乱用
all: unset不是解决变量冲突的工具，它是处理不可控第三方HTML的兜底手段——比如富文本编辑器输出、Markdown渲染结果，你完全没法改它的class结构。
-
all: unset会清空所有属性（包括display、margin、font），元素变“裸体”，之后必须手动补全所有样式 - 别对
div或span用它，它们本就没UA样式；只考虑p、h1～h6、ul、table这类自带默认样式的标签 - 更稳妥的做法：用wrapper包裹第三方内容，只对该wrapper设
all: unset，再在其内部用var()重建所需样式 - 对普通业务组件，用容器变量+前缀命名，比
all: unset可靠十倍
最容易被忽略的是：变量值是“计算后”的，不是“声明时”的。父元素设--size: 1em，子元素font-size: 20px，那子元素里var(--size)就是20px，不是1em——这个隐式转换会让尺寸计算出错，调试时得盯着computed值看，而不是只查源码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
