BEM修饰符管状态，CSS变量管主题，两者正交协作：修饰符如btn--disabled控制组件状态，变量如--primary-color统一管理主题样式，不可混用替代。
直接结论：BEM修饰符管状态，CSS变量管主题，两者不混用、不替代，但能正交协作——修饰符控制组件级状态（如btn--disabled），变量控制全局主题色/间距等可变值（如--primary-color）。
为什么不能用BEM修饰符实现主题切换
BEM修饰符是语义化的「组件状态开关」，不是主题容器。写body--dark或app--theme-dark看似直观，但立刻带来三个问题：
- 违反BEM原则：
body和app不是你定义的块（block），强行加修饰符破坏命名契约 - 样式污染风险：
.app--dark .btn这类选择器层级深、优先级高，容易覆盖第三方组件或未来扩展的变体 - 无法复用变量：深色模式下按钮背景、文字、边框颜色需联动变化，靠类名硬写就得重复声明所有属性，而
var(--bg-color)一处改，全链路响应
正确配合方式：修饰符负责“状态”，变量负责“外观”
一个按钮在深色主题下同时处于禁用态，应同时具备两层控制：
- JS 控制状态类：
el.classList.add('btn--disabled')（BEM修饰符，表达“当前不可交互”） - CSS 变量定义外观：
:root.dark { --btn-bg: #333; --btn-text: #ccc; --btn-border: #555; } - 按钮样式只写一次：
.btn { background-color: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-border); } -
.btn--disabled只需叠加交互约束：.btn--disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }，不重写颜色
容易踩的坑：变量作用域 + 修饰符命名冲突
常见错误现象：切换主题后，btn--loading图标颜色没变，或card--highlighted在暗色模式下背景还是白色。
- 变量未在对应主题作用域中重定义：比如只在
:root.dark里改了--text-color，却忘了同步更新--btn-bg和--card-highlight-bg - 修饰符类名误带主题语义：
btn--dark-primary是非法命名——它把主题（dark）和变体（primary）耦合了，应拆成btn--primary（BEM修饰符）+dark类（主题开关） - JS 切换主题时漏掉
document.documentElement：必须操作document.documentElement.classList.toggle('dark')，而不是body或某个容器，否则:root.dark不生效
React/Vue中避免模板混乱的实操建议
别在 JSX 或模板里拼接主题类和状态类，例如不要写：className={`btn btn--${variant} ${theme === 'dark' ? 'dark' : ''}`}。
- 主题类统一由根节点管理：让
App组件根据themestate 控制document.documentElement的 class，子组件完全无感 - 状态类由组件自身控制：
Button组件只关心disabled、loading等 props，并映射为btn--disabled、btn--loading - 变量值通过 CSS 层叠自动生效：只要
:root.dark里定义了--btn-bg，.btn就自然取到新值，无需 JS 干预
最易被忽略的一点：CSS变量必须在:root及其衍生类（如:root.dark）中声明，不能只靠.dark .btn { --btn-bg: #333; }——后者作用域仅限于.dark .btn后代，无法被兄弟元素或伪元素继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
