组件级css变量必须定义在组件容器上以实现样式隔离，如.card{--card-bg:#f8f9fa}，命名需带组件前缀，js更新应操作组件元素style而非documentelement，回退值须用静态颜色。
组件级 CSS 变量必须定义在组件容器上，不能只靠 :root
全局 :root 里的 --primary-color 会被所有组件继承，一旦某个按钮组件想用紫色主色、另一个用青色，就只能靠 class 覆盖或 JS 操作 DOM——这等于放弃变量优势。真正隔离的关键是把变量声明“下沉”到组件自身容器：比如 .card、.modal 或 Web Components 的 :host。这样变量天然只影响后代，不会波及其他模块。
常见错误：
– 写 :root { --card-bg: #f0f0f0; }，以为加了前缀就安全 → 实际仍是全局可读、可被误改
– 在子元素里声明变量，如 .card-header { --card-bg: #e0e0e0; } → 变量只作用于该元素自身，子元素取不到
-
.card { --card-bg: #f8f9fa; --card-text: #212529; }是正确起点 - 确保组件根元素有明确 class 或属性（如
[data-component="card"]），避免依赖模糊选择器 - 如果组件用 Shadow DOM，变量不会自动透入，得显式用
inherit或::part()暴露
变量名要带命名空间，别省那几个字符
写 --bg 看似简洁，但 .sidebar 和 .notification-badge 都这么定义，切换 sidebar 主题时 badge 也跟着变灰——这不是 bug，是变量名冲突的必然结果。命名空间不是风格问题，是作用域管理的基础设施。
- 推荐格式：
--{component}-{purpose}，例如--card-bg、--badge-status-color - 避免泛用
--color-1、--theme-x这类无语义名，后期维护时根本猜不出用途 - 第三方组件库（如 LayUI、Varlet）已自带前缀（
--lay-color-primary、--var-rate-primary-color），直接覆盖即可，别重命名
用 style.setProperty 批量更新组件变量，别碰 cssText
想让某个 .card 实例从浅色切深色？JS 改 document.documentElement.style.setProperty('--card-bg', '#333') 是错的——它改的是全局，所有 .card 都会变。应该只操作该组件容器的 style：
-
cardEl.style.setProperty('--card-bg', '#333')→ 安全、精准、不影响其他实例 - 多个变量一起改？用对象赋值比循环调用
setProperty更轻量：Object.assign(cardEl.style, { '--card-bg': '#333', '--card-text': '#fff' }) - 绝对不要用
cardEl.style.cssText = '...'→ 它会清空已有内联样式，包括非变量相关属性（如width、margin）
回退值必须是静态颜色，别嵌套 var() 或 calc()
color: var(--card-text, var(--fallback-text)) 看起来聪明，但旧版 Safari 会直接忽略整条声明；background: var(--card-bg, hsl(200, 50%, 90%)) 在部分 Android 浏览器里也会失效。回退值不是“兜底逻辑”，而是浏览器解析失败时的硬编码保底。
- 只用十六进制（
#333）、命名色（black）、rgba()（rgba(0,0,0,0.8)）作 fallback - 多级 fallback 要显式展开：
color: var(--card-text, var(--theme-text, #222))，但第二层var(--theme-text, #222)本身也要满足 fallback 规则 - 千万别在 fallback 里写
calc()或函数，浏览器不认
style 里的变量，下次复用可能带着旧主题渲染——这点容易被忽略，但直接影响 SSR 或微前端场景下的样式稳定性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
