BEM多类名组合合法前提是语义归属一致：Block与对应Element、Modifier必须共存且同属一个组件边界，禁止跨Block混用或缺失基础Block类。
直接在 class 属性里用空格拼多个 BEM 类名完全可行，但组合方式不对会立刻破坏组件边界——不是语法错，是语义崩了。
class 属性里怎么写多个 BEM 类才合法
BEM 类名本身只是字符串，浏览器不校验格式；真正要守的是语义规则。一个元素可以同时拥有 Block、Element 和 Modifier 三类角色，但必须满足归属一致：
-
card（Block）和card__title（Element）能共存，因为后者必须直属前者 -
card--hover（Modifier）必须和card同时出现，单独写card--hover就失去意义 -
card__title--highlighted可以加，但前提是这个高亮状态只属于 title 元素自身，而非 card 整体状态的投射 - 禁止混用不同 Block 的类：
card__title btn__icon是危险信号——两个 Block 的 Element 不该挤在同一节点上
为什么 btn btn--primary btn__icon 看似合理实则违规
这不是“多类名用法问题”，而是 BEM 角色混淆。关键判断点在于 DOM 结构是否支撑这种归属：
-
btn__icon暗示图标是按钮的直属子节点，且不具备跨组件复用能力 - 如果实际结构是
<button class="btn"><span class="btn__icon"></span></button>，那没问题 - 但如果图标被抽成独立组件（比如通过 React 的
<icon name="close"></icon>渲染），它就该是icon icon--close，而不是任何 Block 的 __element - 更隐蔽的问题：
btn--primary描述变体，btn__icon描述结构，两者语义层级不同，强行并列会让样式维护者无法判断哪个类该主导尺寸/颜色/间距
动态拼接 class 时最容易漏掉的 BEM 约束
模板或 JSX 里用三元表达式拼 class，很容易忽略 Modifier 的依存关系：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
className={`btn ${isLoading ? 'btn--loading' : ''}`—— 当isLoading为 false 时，btn还在，但一旦为 true，btn--loading单独存在就失效 - 正确写法：
className={`btn ${isLoading ? 'btn--loading' : ''} ${isActive ? 'btn--active' : ''}`，确保btn始终在前 - Element 类不能条件性缺失：如果 DOM 中有
<span class="btn__text"></span>，就不能只在某些状态下给它加btn__text--error而删掉btn__text—— Element 类是结构必需项，Modifier 才是可选开关 - 工具推荐：
clsx或classnames库能自动过滤 falsy 值，但依然得手动保证基础 Block 类不被剔除
BEM 多类名组合的性能与调试陷阱
浏览器解析 class 字符串毫无压力，但人眼和 CSS 工具会迅速迷失：
-
user-card user-card--expanded card__header card__header--sticky这种写法让开发者误以为card__header属于user-card，但实际它可能来自另一个独立的cardBlock，只是恰好被塞进同一节点——这会导致样式泄漏或覆盖 - CSS 选择器写成
.user-card--expanded .card__header（带空格）会意外命中所有后代，违背 BEM “禁止后代选择器” 原则；正确应是单类名控制：.card__header--sticky - DevTools 里看到一堆 BEM 类堆在一起，第一反应不该是“样式没生效”，而是检查：这个节点真属于所有这些 Block 吗？有没有哪个类本该出现在父元素或兄弟元素上？
BEM 多类名不是字符串叠加游戏，每个类名都是对组件边界的公开声明。写错一个 __ 或漏掉一个基础 Block 类，问题不会立刻报错，但会在某次组件抽取或样式重构时突然爆发——那时你得回溯整个 DOM 树来验证归属关系。
