组件级颜色覆盖必须将变量声明在组件容器（如.card）上，而非:root；否则全局修改会污染所有组件，且后加载的组件样式会覆盖:root定义，导致主题更新失效。
组件级颜色覆盖必须把变量声明写在组件容器上，而不是 :root；否则改一个值，全站跟着变。
为什么直接改 :root 里的 --primary-color 会失效
不是变量没更新，而是组件内部可能已经用更高权重的选择器重定义了同名变量。比如 .card { --primary-color: #5b67f0; } 在你的主题文件之后加载，它就会覆盖 :root 的值——你在 DevTools 里看到的计算样式来源，往往就是这行。
- 浏览器按 CSS 声明顺序解析，后出现的同名变量覆盖先出现的
- 第三方组件库（如 Element Plus）常在自己的 CSS 文件里声明
--ep-color-primary等变量，它们天然比你写的:root更“近” - 检查方法：选中目标元素 → DevTools 的 Computed 面板 → 找
--primary-color→ 点开箭头看具体哪一行生效
.card 容器上声明变量才是真隔离
变量作用域取决于声明位置，不是命名是否带前缀。把 --card-bg 写在 .card 规则里，它就只对 .card 及其后代生效，其他组件完全不受影响。
- 正确写法：
.card { --card-bg: #f8f9fa; --card-text: #212529; } - 错误写法：
:root { --card-bg: #f8f9fa; }→ 全局可读、可被任意地方误改 - 更糟写法：
.card-header { --card-bg: #e0e0e0; }→ 变量只作用于该元素自身，.card-body读不到 - 如果组件用 Shadow DOM，需显式用
inherit或::part()暴露变量，否则外部设的值进不去
JS 动态更新时别碰 documentElement
想让某个 .card 实例切深色？调用 document.documentElement.style.setProperty('--card-bg', '#333') 是错的——它改的是全局，所有 .card 都会变暗。
- 应该只操作该实例的容器：
cardEl.style.setProperty('--card-bg', '#333') - 批量更新多个变量更轻量：
Object.assign(cardEl.style, { '--card-bg': '#333', '--card-text': '#fff' }) - 绝对不要用
cardEl.style.cssText = '...'→ 它会清空已有内联样式（比如width、margin） - SSR 场景下，服务端需提前注入变量值，否则首屏会闪动
回退值必须是静态颜色，别嵌套 var()
color: var(--card-text, var(--fallback-text)) 看似聪明，但旧版 Safari 会直接忽略整条声明，文字变成透明或默认黑色。
- 回退值只能是静态值：
color: var(--card-text, #212529) - 想强制走回退？得先在组件内显式设为
unset：--card-text: unset;，再用var(--card-text, #212529) - 嵌套
var()合法但难调试，建议只用一层 - 命名空间不能省：
--bg和--text这类泛用名，在多个组件共存时必然冲突
真正容易被忽略的点是：变量是否被继承下来，不取决于 DOM 深度，而取决于 CSS 选择器是否真的命中并声明了该变量。跳过中间层级（比如 .card → .card-title 中间没写任何变量声明），继承链就断了——这不是 bug，是 CSS 层叠规则本身的设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
