直接用class切换主题易失控，因强依赖DOM结构且难维护；应改用CSS自定义属性+作用域class解耦主题与组件，避免:root污染，BEM仅管命名、主题通过外层class注入，变量不设静态fallback。
为什么直接用 class 切换主题容易出问题
在大型项目里，靠给 加 theme-dark 类再写 .theme-dark .button 这类规则，很快就会失控。一旦组件嵌套变深、第三方库介入、或者某处漏写了父级 class，样式就断链；更麻烦的是，.theme-dark .card .price 这种选择器对 DOM 结构强依赖——哪怕中间多一层 wrapper，价格色就回退成默认值。
用 CSS 自定义属性 + 作用域 class 实现真正解耦
核心是把「主题」和「组件」拆成两个独立维度：主题只负责提供变量，组件只消费变量，不感知主题存在。
- 每个主题用一个顶层 class 封装变量，比如
.theme-light和.theme-dark，内部只写--c-primary: #007bff这类声明，不写任何具体样式 - 组件样式统一用
var(--c-primary)，不写死颜色值；例如.button { background-color: var(--c-primary); } - HTML 中只需确保主题 class 在祖先节点上即可：
，无需在 button 上重复加 class - 支持任意嵌套：子主题可覆盖父主题变量，比如
.theme-light重新声明了--c-text，.text就自动生效
避免用 :root 全局污染导致的覆盖冲突
:root 是全局作用域，所有主题变量如果都塞进去，后加载的主题会无条件覆盖先加载的，没法共存。实际项目中常需要同时支持「用户偏好主题」+「页面局部深色模式」，这时必须放弃 :root，改用带 class 的作用域：
.theme-system { --c-bg: #fff; }
.theme-dark { --c-bg: #1a1a1a; }
.theme-light { --c-bg: #f8f9fa; }
这样浏览器会按 class 匹配优先级自动选用变量，不需要 JS 手动切换 :root，也不怕构建时 CSS 加载顺序错乱。
BEM 类名与主题变量要分层管理
BEM 解决的是组件命名隔离，不是主题逻辑。别把主题塞进 BEM 名字里，比如 .button--dark 是反模式——它把表现（暗色）硬编码进结构名，未来加个 --high-contrast 就得再扩一倍类名。正确做法是：
- BEM 类名只表达语义和结构：
.button、.button__icon、.button--primary - 主题控制通过外部 class 注入变量：
<div class="theme-dark"><button class="button"></button></div>
- 如果某个按钮真需要强制脱离主题（比如 logo 图标固定白色），用
style="--c-logo: white" 行内覆盖，而不是新增 BEM 修饰符
最容易被忽略的一点：主题变量的 fallback 值不能写成 var(--c-bg, #fff) 这种静态回退。当 .theme-dark 被移除时，--c-bg 变量消失，但 fallback 不会动态更新为当前主题值——它只是初始兜底。所以组件里该用 var(--c-bg) 就用，别画蛇添足加 fallback，让缺失变量自然触发继承或浏览器默认行为更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
