不能写.button--dark等主题修饰符，因其违背bem语义（主题是系统上下文而非组件状态），导致样式复用断裂、ssr错乱、purgecss误删；正确做法是用html[data-theme="dark"]统一注入css变量，bem修饰符仅作选择器钩子。
直接用 html[data-theme="dark"] 配合 BEM 修饰符（如 .button--primary）重定义 CSS 变量，而不是把主题当修饰符硬写成 .button--dark —— 后者会破坏语义、导致复用断裂、SSR 易错、PurgeCSS 误删。
为什么不能写 .button--dark 这类“主题修饰符”
BEM 修饰符是为组件自身状态或变体服务的，比如 --disabled、--loading，不是为系统级外观偏好设计的。--dark 描述的是整个页面上下文，不是按钮的内在角色。
- 语义错位：
.button--dark让人误以为“这是一个深色按钮”，而非“这个按钮在深色主题下应如何渲染” - 复用断裂：每个组件都要配一套
--dark版本，.card--dark、.input--dark……无法靠变量联动，改一个颜色就得改几十处 - SSR 和构建风险：服务端首次渲染时若未注入
data-theme，但 HTML 中已存在class="button--dark"，样式无对应规则，直接白屏或错色；PurgeCSS 也可能因该类名未在初始 HTML 出现而删掉相关 CSS
正确做法：data-theme 控制变量作用域，BEM 修饰符只声明角色
让 html[data-theme="dark"] 成为变量注入的锚点，BEM 修饰符仅作为选择器钩子，不携带具体样式值。
- JS 切换主题时只改
document.documentElement.dataset.theme = "dark"，不操作任何 class 名 - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #333; --btn-text: #fff; }，而不是.button--dark { background: #333; } -
.button--primary自身只写background-color: var(--btn-bg, #007bff);，带 fallback 防 JS 加载失败 - 所有主题相关样式收口到单个
button.css文件中，按组件组织，避免theme-dark.css和theme-light.css分散加载引发覆盖顺序问题
修饰符命名与组合的边界在哪
BEM 修饰符必须严格绑定块或元素，且只表达单一、正交的状态维度。阴影、边框、尺寸、禁用态等可以共存，但不能嵌套或拼接。
- 合法：
class="button button--primary button--disabled button--no-shadow-mobile" - 非法：
button--primary-disabled（这不是修饰符，是新块名）、button--dark--large（修饰符不可叠加成新修饰符） - 边框粗细随主题变化又随状态变化？拆成两个修饰符：
button--border-solid+button--disabled，再用组合选择器定义：.button.button--border-solid.button--disabled - 移动端弱化阴影？加
button--no-shadow-mobile，但必须在媒体查询内控制显隐，别用 JS 动态切换类名
容易被忽略的细节：变量重定义范围和选择器权重
最常出问题的地方不是写法错误，而是变量没在正确上下文中覆盖，或者选择器层级意外打断了继承链。
- 只在
:root或html[data-theme="dark"]里改了--text-color，却漏掉--card-bg和--input-border，结果部分组件仍用亮色值 - 写了
.app--dark .button--primary这种高权重选择器，后续加的.button--loading样式被压制，加载图标颜色不变 - 用了
body.app--dark而非html[data-theme]，导致prefers-color-scheme: dark媒体查询无法自动同步，也破坏原生表单控件可访问性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
