css继承是向下穿透而非作用域，inherit/unused手动重置导致维护成本激增；应通过容器级css变量（如.user-card{--text-primary:#1a1a1a}）建立边界，避免全局污染与误传。
为什么 inherit 和 unset 会让样式越改越乱
因为 CSS 的继承不是“作用域”，而是“向下穿透”——父元素设了 color: red，所有没显式覆盖的后代都会红，哪怕你只在某个卡片里想临时换色。这时候用 inherit 或 unset 手动重置，等于在每一层补丁，维护成本指数上升。
真正可控的方式是：让样式从“源头”就带上下文边界，而不是靠后代拼命拦截。
- 别在全局选择器（如
body、div）上设影响深远的color/font-family/line-height - 避免用
* { box-sizing: border-box }后又在特定组件里反复重写box-sizing - 继承链越长，
inherit越容易误传——比如button继承了section的font-size，但你其实只想让它继承article
用 :root + var() 模拟局部作用域
CSS 变量本身不继承，但可以在任意选择器内重新定义，这就天然形成“作用域快照”。关键不是定义多少变量，而是把变量注入到有明确边界的容器节点上。
比如一个用户卡片组件，不要写 .card h3 { color: var(--theme-primary) } 然后去全局改 --theme-primary，而是：
.user-card {
--text-primary: #1a1a1a;
--border-radius: 8px;
}
.user-card h3 {
color: var(--text-primary);
border-radius: var(--border-radius);
}
- 变量名带前缀（如
--card-、--modal-）比通用名（--primary）更安全，避免跨组件污染 - 变量定义写在最外层容器选择器里，不是
:root，这样子元素读取的就是该容器的“快照值” - 如果需要响应式切换主题，直接在媒体查询里重写该容器的变量：
@media (prefers-color-scheme: dark) { .user-card { --text-primary: #f0f0f0; } }
什么时候必须用 all: unset？
仅当嵌入第三方 HTML 片段（如富文本编辑器输出、Markdown 渲染结果）且完全无法控制其 class 结构时。这是兜底手段，不是常规方案。
all: unset 会清空所有可继承和不可继承属性，相当于把元素打回“裸体状态”，之后必须手动补全所有样式，包括 display、margin、font 等。
- 别对
div或span直接用all: unset，它们默认没有样式，没必要 - 对
p、h1～h6、ul、table这类自带 UA 样式的标签才可能需要 - 更稳妥的做法是：用 wrapper 元素包裹第三方内容，然后只对该 wrapper 设
all: unset，再在其内部用var()重建所需样式
变量 fallback 不是万能解药
var(--color, #333) 看似保险，但如果 --color 在祖先中被定义为 initial 或 unset，fallback 依然不会触发——CSS 变量只有“未定义”才会走 fallback，而“定义为无效值”不算未定义。
- 测试 fallback 是否生效，不能只看 DevTools 里变量有没有灰掉，要实际渲染看颜色/尺寸是否符合预期
- 避免链式 fallback：
var(--a, var(--b, #000))，一旦中间某层--b被设为unset，整个链就断了 - 真正需要降级的场景，优先用
@supports检测变量支持度，或用 JS 动态写入 fallback 值到 style 属性
变量的作用域感是骗出来的——它靠的是你主动把变量钉死在某个容器上，而不是指望浏览器自动识别“这里该用哪套值”。很多人卡在“为什么我改了 :root 的变量，组件没反应”，答案往往只是忘了在组件根元素上重新声明那几个关键变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
