组件级CSS变量必须定义在组件根选择器上，如.card { --card-bg: #fff; }，以实现作用域隔离；全局变量仅适用于真正跨组件复用的值；内联style="--xxx: value"最可控；变量命名需带命名空间，且须注意继承链与声明位置匹配。
组件级CSS变量必须定义在组件根选择器上，不能只靠:root
全局变量写在:root里，适合品牌色、字体、间距等真正跨组件复用的值；但--card-bg、--modal-shadow这类变量一旦也塞进:root，改一次就全组件跟着变——这不是配置，是耦合。真正隔离的主题切换，得让每个组件自己控制变量作用域。
正确做法是把变量声明在组件容器选择器里：.card { --card-bg: #fff; --card-border: #e9ecef; }。这样.card-title里写background-color: var(--card-bg)才能继承到，且不影响其他.banner或.list组件。
- Vue/React中若用
className="card"，就得确保对应CSS文件里有.card { --card-bg: ... }规则，否则var(--card-bg)解析为空 - Web Components优先用
:host { --card-bg: #fff; }，语义更清、作用域天然隔离 -
<style scoped>不改变CSS变量作用域，变量仍需显式在父容器上声明
内联style="--xxx: value"是最可控的注入方式
直接在HTML标签上写style="--card-bg: #f8f9fa; --card-border: #e9ecef;"，变量只生效于该元素及其后代，JS更新时只需el.style.setProperty('--card-bg', '#222')，不触发整页重排，SSR也能直出值避免闪动。
但要注意：别在标签里写style="--card-bg: #fff"后又在CSS里重复定义同名变量——浏览器按层叠规则取最近的有效声明，容易误判谁生效。
立即学习“前端免费学习笔记（深入）”；
- DevTools里看“Computed”面板，确认目标元素的
var(--card-text)是否解析为有效值；若显示inherit或空，说明上游没传下来 - 用
getComputedStyle(el).getPropertyValue('--card-text')在控制台验证，返回空字符串即未继承 - 避免跳层使用：比如
.card声明了--card-text，但.card > .content > .card-title要能取到，就得确保.content没覆盖或重置该变量
document.documentElement.style.setProperty只能改:root变量
这个API本质是操作<html>元素的内联样式，所以只对定义在:root里的变量生效。常见错误是：变量明明在.card里定义，却试图用document.documentElement.style.setProperty('--card-bg', '...')去改——不生效。
拼写必须严格一致：--bg-dark和--bg-dark-mode、大小写差一个、连字符少一个，都取不到值。
- 确保CSS中已声明
:root { --primary-color: #007bff; } - JS调用时必须带
--前缀：document.documentElement.style.setProperty('--primary-color', '#28a745') - 批量更新可用
Object.entries(theme).forEach(([k, v]) => document.documentElement.style.setProperty(k, v))
CSS变量不支持transition，但可间接实现动画
变量本身不是CSS属性，浏览器不认为--size变化是“可过渡事件”，所以transition: --size 0.3s无效。但你可以把变量用在支持过渡的属性上，靠属性变化带动动画。
例如：color: var(--text-color); transition: color 0.3s ease;就能平滑过渡；而font-size: var(--size)不行，得换成transform: scale(var(--scale)); transition: transform 0.3s;来绕过。
- 避免用变量控制
display、z-index、content等不可过渡属性 - 提供默认值增强健壮性：
color: var(--text-color, #000);，防止变量未定义时样式崩塌 - 命名必须带命名空间（如
--card-bg），避免--bg这种泛化名引发跨组件冲突
getPropertyValue、确认选择器是否真的命中，而不是直接怀疑语法写错了。 
