不能用.button--dark控制主题，因其破坏bem语义、导致复用断裂、ssr白屏、purgecss误删且无法响应系统偏好；应统一用html[data-theme="dark"]驱动css变量，bem修饰符仅表达组件角色，所有变量必须带fallback。
为什么不能用 .button--dark 这类修饰符控制主题
这不是“不够规范”的问题，而是直接导致样式复用断裂、SSR 白屏、PurgeCSS 误删、系统偏好不同步。BEM 修饰符（如 --dark）本应表达组件自身的状态或变体（比如 --disabled、--loading），不是环境上下文。把主题塞进修饰符里，等于让每个组件都得写一套 --dark 版本——.button--dark、.card--dark、.input--dark……颜色、边框、阴影全得重复定义，变量无法联动。
更实际的问题：
-
.button--dark在 HTML 中未显式出现时，PurgeCSS 极大概率在构建阶段删掉对应 CSS - 服务端渲染首屏时 JS 尚未执行，
data-theme没设置，但.button--dark类名已存在，却无样式匹配，直接白屏或错色 - 原生
<select></select>在深色系统下本应自动适配，但.button--dark input强制覆盖背景色，反而破坏可访问性
正确做法：用 html[data-theme="dark"] 驱动变量重定义
主题控制权必须落在根节点，和 BEM 修饰符解耦。JS 只改 document.documentElement.dataset.theme，不碰任何 class；CSS 用属性选择器锚定变量作用域，BEM 修饰符只管“我是什么”。
实操要点：
- HTML 中写
，而非 - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #333; --btn-text: #fff; }，不是.button--dark { background: #333; } - 所有变量必须带 fallback：
background-color: var(--btn-bg, #007bff);，否则 SSR 或 JS 加载失败时必白屏 - SSR 模板需根据 User-Agent / Cookie / headers 提前注入
data-theme值，不能依赖客户端 JS 补充
如何避免 html[data-theme] 选择器被工具链误报或误删
PostCSS 插件（如 stylelint-bem）或 PurgeCSS 默认不识别 html[data-theme="dark"] .button--primary 这类组合，容易当成非法 BEM 或未使用 class 直接干掉。
应对方式：
- 在 PurgeCSS 的
safelist中显式添加正则：/^html[data-theme=.*]$/和/.button--/ - stylelint 配置中加
ignoreSelectors: ['html\[data-theme']，避免 BEM 规则误报 - 禁止写
:root.dark { --color: #252525; }——:root不支持属性选择器，data-theme变化时完全不响应
BEM 修饰符和主题变量的协作边界在哪
关键不在“怎么写修饰符”，而在“谁负责什么”。.button--primary 只声明“这是主按钮”，它自身不设颜色；html[data-theme="dark"] 负责提供上下文，注入新变量值；两者通过 CSS 变量桥接，而非 class 名耦合。
容易被忽略的细节：
- 多个主题共存（如深色 + 高对比度）时，不能拼
app--theme-dark-high-contrast——修饰符不可嵌套，应叠加app app--theme-dark app--theme-high-contrast - 写
.app--theme-dark .button--primary是错的：app不是你定义的 Block，app--theme-dark违反 BEM 命名契约 - 变量重定义必须覆盖完整链路：改了
--btn-bg，但漏了--btn-border或--btn-shadow，部分视觉仍残留亮色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
