BEM类名失控源于混淆页面层级与模块边界，应按独立复用性、自有状态和跨上下文能力拆分block；嵌套深时可用mix替代长链命名，工具辅助不能替代设计判断。
类名爆炸时，BEM不是必须一气呵成写完
BEM 的 block<strong>element--modifier</strong> 链式结构一旦嵌套多层、业务逻辑复杂，类名立刻失控，比如 user-profilecard-header__title-text--is-editing——这不是语义化，是自找麻烦。核心原则是：BEM 描述的是模块边界内的关系，不是整棵树的路径。
- 每个 BEM 块（
block）应有清晰的职责边界，对应一个可复用、可独立测试的 UI 单元 - 元素（
__element）只属于直接父块，不跨级继承上下文 - 修饰符（
--modifier）只表达该块自身的状态，不传递父级状态
常见错误是把「页面层级」当「BEM 层级」，比如在 dashboard 块里硬塞 dashboard<strong>user-profile</strong>card__title——这实际是三个块：user-profile、card、title，各自独立声明更合理。
什么时候该拆出新 block 而不是加长 element 名
判断标准很简单：这个子组件是否具备独立存在意义？能否被抽到其他页面复用？是否拥有自己的 JS 行为或 CSS 状态？
- 如果它有自己的事件监听（如
handleClick）、状态管理（如isExpanded）、或需要单独做动画控制，就该是独立block - 如果它在多个父容器中重复出现（比如
status-badge出现在用户列表、订单卡片、通知弹窗里），就必须拆 - 如果它的样式/行为不依赖父块的具体实现（例如
card不关心自己在profile还是settings里），那它就不该用父块名做前缀
反例：profile-card__status-badge → 正确应为 status-badge，通过组合使用（profile-card 内部放 status-badge）建立关系，而非命名耦合。
立即学习“前端免费学习笔记（深入）”；
嵌套深但不想拆块？用 mix 替代长链式命名
BEM 官方支持 mix（混合），允许一个 DOM 节点同时携带多个 block 或 element 的类名。这是应对“视觉嵌套但逻辑平级”的合法解法。
- 在
card内部渲染一个button，它既是card<strong>action</strong>，又是独立的button组件 → 写成cardaction button button--primary - 这样既保持
card的结构完整性，又避免造出card__action-button--primary这种四不像
注意：mix 不是偷懒借口。如果 button 在卡内有完全不同的尺寸、边距、交互反馈，那它其实已是 card__button，此时应承认它是 card 的专属元素，而非混用通用 button。
工具链能帮上忙，但别依赖自动缩写
有些 PostCSS 插件或预处理器（如 Sass）支持 BEM 快捷写法，比如 &<strong>title</strong> 编译成 blocktitle。它们能减少手误，但解决不了设计问题。
- 自动补全类名不会阻止你写出
layout<strong>sidebar</strong>nav<strong>item</strong>link--active这种反模式 - CSS-in-JS 库（如 styled-components）容易让人绕过 BEM，转而用深度选择器（
& > div > span），结果是更难维护 - 真正有效的约束来自代码审查：把「单个类名超 35 字符」或「含两个以上双下划线」设为 CI 检查项，比教人背规则管用
复杂点从来不在语法，而在判断——哪个视觉单元值得被当作一个 block。这点没想清楚，再短的类名也是错的。
