CSS变量必须依附于有效选择器声明，如.button{--color:red;}，不可孤立定义；应为组件设唯一根类（如.card-root）统一管理变量，加前缀避免冲突，覆盖由选择器权重决定。
局部变量必须写在选择器内部，不能孤立声明
直接写 --color: red; 会报 Invalid CSS property name 错误。CSS 变量不是独立语句，必须依附于一个有效选择器。比如 .button { --color: red; } 才合法；.button 是作用域边界，它的所有后代元素（.button-icon、.button-label）才能读取这个变量。
常见错误：把变量写在 div、* 或未加类名的标签上，结果整个页面都继承了不该有的值。尤其注意不要在 :root 里提前定义大量模块专用变量（如 --modal-bg），否则容易被其他组件意外覆盖或读取。
用根类统一管理变量，避免散落在子选择器中
推荐为每个 UI 组件配一个唯一根类（如 .card-root、.modal-root），所有变量只定义在这个根类选择器内，样式规则另起选择器引用 var(--xxx)。
这样做的好处是：
立即学习“前端免费学习笔记（深入）”；
- 作用域清晰，调试时 DevTools 的 computed 面板能准确显示变量来源
- 避免多个子选择器重复声明同名变量导致覆盖冲突
- 便于后续用 JS 动态切换主题（比如
document.querySelector('.card-root').style.setProperty('--card-bg', '#333')）
反例：.card-header { --card-bg: #fff; } + .card-body { --card-bg: #f8f9fa; } —— 不仅难维护，还可能因权重差异导致不可预期的值。
同名变量按 CSS 选择器权重决定最终值
CSS 变量没有 !important，覆盖逻辑完全由选择器优先级决定。例如：
:root { --color: red; }
.card { --color: green; }
.card .title { --color: blue; }
那么 .card .title 元素读取 var(--color) 得到的是 blue，因为它的声明位置权重最高。但注意：这个 blue 不会“污染”兄弟节点，只影响自身及其后代。
容易踩的坑：
- 用
!important覆盖变量值（无效，且切断继承链，DevTools 里看不到来源） - 依赖 class 名“自动生效”，比如以为加了
class="theme-dark"就能让所有--bg切换——实际得确保该 class 对应的选择器里真写了--bg: #111
跨模块配色要加唯一前缀，别共用泛用名
多个组件如果都用 --bg、--primary 这类名字，切一个模块的主题就会连带影响另一个。真正可控的做法是给变量名加前缀：--card-bg、--modal-primary、--form-error-color。
配合嵌套使用更安全：
.card { --card-bg: #f8f9fa; }
.card > .header { background-color: var(--card-bg); }
这样即使全局也定义了 --bg，也不会干扰 .card 内部逻辑。多人协作时，前缀还能自然形成命名空间，减少冲突概率。
