主题色切换必须用 modifier，如 .button--theme-dark；禁止新建 .theme-dark 等伪 block，须通过 html[data-theme="dark"] 驱动变量并配合 bem 修饰符使用。
主题色切换必须用 Modifier，不能建独立 Block
主题是组件的变体，不是新功能单元。建一个叫 .theme-dark 的 Block 是错的——它没业务语义、不可复用、破坏 BEM 的 Block 边界。BEM 要求 Modifier 表达「同一个 Block 的不同状态」，而深色/浅色正是 .button、.card 这些 Block 的合法变体。
常见错误现象：.theme-dark .button 这种写法退化为普通 CSS 层级控制，既无法被 PostCSS 插件识别，也容易被 PurgeCSS 误删；更严重的是，它让组件失去“知道自己在什么主题里”的能力。
- Modifier 必须绑定到已有 Block 上，如
.button--theme-dark或顶层.app--theme-dark - 禁止创建
.dark-theme、.color-scheme这类伪 Block - 如果真需要跨组件统一控制，应通过
html[data-theme="dark"]驱动变量，而非新增 Block
Modifier 命名必须带 --theme- 前缀
直接写 .button--dark 是非法的。BEM 不反对 --dark，但要求它明确归属主题语义，否则和 .button--disabled、.button--loading 混淆——前者是环境上下文，后者是组件自身状态。
不带前缀的 Modifier 会被静态分析工具误判为新 Block 或状态冲突项，尤其在 CI/CD 流程中容易触发 stylelint 报错。
- ✅ 合法：
.app--theme-dark、.button--theme-high-contrast - ❌ 非法：
.app--dark、.button--dark、.dark-app、.theme-dark - 多个主题叠加时用并列类名：
.app--theme-dark.app--theme-high-contrast，不拼接
为什么不能把主题挂到 body 或 :root 上？
body.app--theme-dark 看似方便，但 body 不是你定义的 Block，它违反 BEM “修饰必须作用于明确 Block” 的前提。更实际的问题是：它无法响应 prefers-color-scheme，SSR 首屏变量无 fallback，原生表单控件（如 <select></select>）样式被强制覆盖。
而 :root.dark 或 :root[data-theme] 问题更大——CSS 变量虽能生效，但 BEM 选择器无法命中，导致 .button--primary 在暗色下仍按亮色逻辑渲染，视觉与语义脱节。
- 唯一合规根级锚点是
html[data-theme="dark"] - JS 切换只需一行：
document.documentElement.dataset.theme = "dark" - CSS 中必须配合 Block 修饰符使用：
html[data-theme="dark"] .button--primary { --bg: #1e1e1e; }
图标、文字等子元素颜色该不该用 Modifier 控制？
不该。图标（如 .button__icon）不是独立 Block，它的颜色应由父级 Block 的主题 Modifier 全局驱动，而不是自己加 --dark。否则会重复声明、难以维护，且破坏“主题属于 Block 整体”的语义。
典型错误：.button__icon--dark 看似精细，实则让图标脱离按钮主题上下文——当按钮处于 .button--theme-high-contrast 时，这个 icon 类根本不会生效。
- 正确方式：在
.button--theme-dark下统一重置所有子元素变量，如--icon-color - 禁用硬编码颜色类：
.button__icon--red、.text--gray-800这类都违背 BEM 主题正交性 - 所有颜色值必须走 CSS 变量 + fallback：
color: var(--text-primary, #333);
真正难处理的是 SSR 场景下 data-theme 尚未注入时的变量 fallback，以及多主题叠加时 Modifier 的优先级顺序——这两处不写 JS 或服务端逻辑就绕不过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
