组件级样式配置需将CSS变量定义在组件根选择器（如.card）或内联style中，而非:root，以实现真正隔离的主题切换；变量名须带命名空间（如--card-bg），避免跨组件耦合与冲突。
组件级样式配置不是靠全局变量“一设全改”，而是把 --color-primary 这类变量定义在组件容器上，让子元素只继承它该继承的那一份。
为什么不能全写在 :root 里
写了 :root { --color-primary: #007bff; }，再给某个 .card 写 background: var(--color-primary);，看起来没问题——但只要其他组件也用这个变量，改一次就全乱。这不是“配置”，是“耦合”。真正隔离的主题切换，必须让每个组件控制自己的变量作用域。
-
:root适合品牌色、字体、间距等真正跨组件复用的基础值 - 组件专属变量（如
--card-bg、--modal-shadow）必须声明在组件根选择器内，比如.card { --card-bg: #fff; } - React/Vue 中若用 className="card"，就得确保 CSS 文件里有对应选择器声明变量，否则子元素调用
var(--card-bg)就是无效值
如何在 HTML 中安全注入组件变量
最轻量、最可控的方式是内联 style 属性直接写变量，而不是靠外部 CSS 规则“碰运气”：
<div class="card" style="--card-bg: #f8f9fa; --card-border: #e9ecef;"> <h3 class="card-title">标题</h3> <p class="card-text">内容</p> </div>
这样做的好处是：变量只生效于该元素及其后代；JS 动态更新时只需 el.style.setProperty('--card-bg', '#222')，不会触发整页重排；SSR 渲染时也能服务端直出值，避免闪动。
立即学习“前端免费学习笔记（深入）”；
- 别在 HTML 标签里写
style="--card-bg: #fff"后又在 CSS 里重复定义同名变量——浏览器按层叠规则取最近的有效声明，容易误判 - 如果用 Web Components，优先用
:host { --card-bg: #fff; }，比 class 更语义化且天然作用域隔离 - Vue 的
<style scoped>不影响 CSS 变量作用域，变量仍需显式在父容器上声明
子元素取不到 var(--xxx) 值的常见原因
不是语法错，而是继承链断了。CSS 变量不自动“冒泡”，只靠父→子逐层传递：
- 检查 DevTools 的 “Computed” 面板，看目标元素的
var(--card-text)是否解析为有效值；若显示inherit或空，说明上游没传下来 - 用
getComputedStyle(el).getPropertyValue('--card-text')在控制台验证——返回空字符串即未继承 - 避免跳层使用：比如
.card声明了--card-text，但.card > .card-title没问题，.card > .content > .card-title就得确保.content没覆盖或重置该变量 - 别用
!important覆盖变量值——它对var()无效；要改的是变量本身，不是它的使用处
最容易被忽略的一点：变量名带命名空间不是“可选建议”，而是必要习惯。用 --card-bg 而非 --bg，不是为了好看，是防止第三方 UI 库或未来新增模块悄悄覆盖你的值——这种冲突往往在主题切换时才暴露，且极难定位。
