modifier 必须绑定到 block 而非 element，主题应通过 block 的 modifier（如 .header--theme-dark）统一控制，并配合 css 自定义属性实现变量注入与继承，避免 element 直接使用 modifier 或硬编码复合类名。
Modifier 命名必须绑定到 Block，不能直接作用于 Element
很多人写 .header__logo--dark 以为这样就能切换主题，结果发现样式没生效或覆盖混乱——根本原因是 BEM 规范里 Modifier 只能修饰 Block 或 Element，但它的语义归属必须清晰：主题是整个组件的变体，不是某个子元素的独立状态。
正确做法是把主题 Modifier 加在 Block 上，让所有内部 Element 通过嵌套响应它：
.header { }
.header--theme-dark { }
.header__logo { }
.header--theme-dark .header__logo { /* 深色模式下的 logo 样式 */ }
-
--theme-dark、--theme-light这类 Modifier 必须作用于 Block（如.header），而非某个 Element - Element 内部样式不写 Modifier，而是靠父级 Block 的 Modifier 触发条件样式
- 避免写
.header__logo--theme-dark—— 它破坏了主题的统一性，也增加维护成本
用 CSS Custom Properties 配合 Modifier 实现皮肤变量注入
纯 class 切换容易重复写颜色、间距等声明。更可持续的方式是把主题变量抽出来，由 Modifier 触发变量重定义：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
:root {
--header-bg: #fff;
--header-text: #333;
}
.header {
background-color: var(--header-bg);
color: var(--header-text);
}
.header--theme-dark {
--header-bg: #1a1a1a;
--header-text: #f0f0f0;
}
- 每个主题 Modifier 只负责重置一组 CSS 变量，不写具体样式规则
- Element（如
.header__logo）直接用var(--xxx)，无需感知主题 - 注意：CSS 变量作用域是继承链，
.header--theme-dark必须是父级，否则子元素拿不到新值
JavaScript 切换时别只改 class，要同步处理伪类和动态内容
用 JS 切换 document.body.classList.toggle('theme-dark') 很常见，但在 BEM 下容易漏掉几个关键点：
- Modifier 必须加在 Block 容器上，不是全局
—— 除非你真打算全站统一切换；多数场景是局部组件（如.card）自己管理主题 -
:focus-visible、:checked等伪类样式可能依赖主题色，需在对应 Modifier 下重新定义，例如.header--theme-dark input:focus-visible - 如果组件内有 SVG 图标或 inline
<svg></svg>，fill/stroke 值不会自动响应 CSS 变量，得显式写成fill: var(--icon-color)
多主题嵌套时 Modifier 优先级容易失控
当一个页面同时存在 .card--theme-dark 和 .card--size-large，再叠加 .card--state-hover，组合爆炸会让 CSS 文件迅速膨胀。
- Modifier 之间不建议叠加使用（如
.card--theme-dark--size-large），BEM 不支持这种链式 Modifier - 优先用单个 Modifier 控制主题（
--theme-dark），其他维度（尺寸、状态）用独立 Modifier，靠 CSS 层叠顺序控制优先级 - 如果必须组合，用 JavaScript 动态生成 class 列表：
['card', 'card--theme-dark', 'card--size-large'].join(' ')，而不是硬编码复合名 - 检查 DevTools 中 computed styles，确认
--theme-dark确实覆盖了 root 变量，且没有被更高 specificity 的规则打断
真正麻烦的不是怎么写 Modifier，而是主题变量是否被所有子元素一致消费——哪怕漏掉一个 color 或 border-color，皮肤就会局部“穿帮”。每次新增 Element 时，得手动检查它用了哪些变量，而不是默认继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
