bem 修饰符（如 .button--dark）不能用于主题控制，因其违背语义契约、导致维护困难、purgecss 删除未用样式、ssr 错色及无法响应系统偏好；应改用 html[data-theme] 控制 css 变量作用域。
为什么不能用 .button--dark 这类 BEM 修饰符控制主题
这不是“不够简洁”的问题，而是直接破坏 BEM 的语义契约：.button--dark 暗示按钮自身处于“深色状态”，但深色模式是全局上下文，不是组件的交互态或视觉变体。一旦这么写，所有组件都得配一套 --dark 版本：.card--dark、.input--dark……改个主色就得全局搜索替换，变量完全无法联动。
更实际的问题是构建和渲染阶段就出错：
- PurgeCSS 默认只保留 HTML 中显式出现的 class；用户首次访问是亮色模式，
.button--dark根本没在 DOM 里，相关样式大概率被删掉 - SSR 渲染时 JS 尚未执行，
data-theme没设，但.button--dark类已存在，样式却未加载，按钮直接白底黑字错色 -
.button--dark写死颜色值，无法响应系统偏好变化，也断开了prefers-color-scheme的自动适配链路
正确做法：用 html[data-theme="dark"] 控制变量作用域
BEM 修饰符只管组件角色（如 .button--primary），主题控制权必须交给根节点。JS 切换时只改这一行：
document.documentElement.dataset.theme = "dark";
CSS 中不重写属性，只覆盖变量：
html[data-theme="dark"] .button--primary { --btn-bg: #1e1e1e; --btn-text: #f0f0f0; }
.button--primary { background-color: var(--btn-bg, #007bff); color: var(--btn-text, #fff); }
关键点：
-
.button--primary自身不写具体颜色，只用var(--btn-bg, #007bff)，fallback 必须带，防 JS 失效或 SSR 首屏白屏 - 禁用态用
.button--primary.button--disabled组合，但.button--disabled只控制opacity和pointer-events，不碰颜色变量 - 所有主题变量必须在
:root定义默认值，再由html[data-theme]覆盖，不能反着来
如何让 prefers-color-scheme 和手动切换共存不打架
仅靠 @media (prefers-color-scheme: dark) 无法支持用户手动覆盖。但也不能用 JS 直接调 document.documentElement.style.setProperty('--bg', '#121212')——这会彻底屏蔽媒体查询的自动响应，下次用户切系统主题，页面毫无反应。
可靠方案是分层处理：
- 先用
@media (prefers-color-scheme: dark)设置初始值：:root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; } } - 用户手动切换时，用
html[data-theme="dark"]覆盖同一组变量，且确保该选择器权重 ≥ 媒体查询生成的规则（通常没问题，因它在 :root 后声明） - 检查 DevTools → Elements →
:root节点，确认切换后变量值是否更新；若没变，说明 CSS 中漏写了html[data-theme="dark"] :root { --bg: ... }这一层
注意：@media 块必须写在所有 :root 声明之后，且不能嵌套在其他媒体查询里，否则旧版 Safari 会忽略。
变量重定义范围容易漏，权重失控更难察觉
常见错误不是语法写错，而是变量没在正确上下文中覆盖，或选择器层级意外打断：
- 只在
:root下改了--text-color，却漏掉--card-bg、--input-border、--link-hover，导致卡片仍是白底、输入框边框还是浅灰 - 写了
.app--dark .button--primary这种高权重选择器，结果后续加的.button--loading样式被压制，加载图标颜色不变 - 多个主题文件分开打包（
theme-light.css/theme-dark.css），加载顺序不对，深色变量被浅色覆盖
真正容易被忽略的是：BEM 修饰符本身不解决主题切换，它只是提供了一个干净的钩子。关键在于把变量作用域锚定在 html，并确保所有组件都通过 var(--x) 引用，而不是硬编码或依赖 class 层级覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
