根本原因是类名层级未真正解耦，bem要求样式严格基于单个类名匹配、禁用结构选择器与动态拼接，需统一修饰符前缀、硬编码类名、避免css modules破坏可读性，并通过工具校验和协作对齐保障体系落地。
为什么改用 BEM 后样式还是互相污染？
根本原因不是没写 bem，而是类名层级没真正解耦。比如写成 .header__logo--large 却在 CSS 里又写了 .header .logo，等于白搭——BEM 要求所有样式必须严格基于单个类名匹配，禁止依赖 DOM 结构。
实操建议：
- 删掉所有带空格的选择器，例如
.card .title→ 改成.card__title - 组件内部元素不继承父组件状态，状态修饰符只加在当前元素上：
.button--disabled✅，.button .icon--disabled❌ - 避免嵌套过深：BEM 不鼓励
.modal__content__header__title，应拆成独立组件或用.modal-content__header+.header__title
怎么让设计师和前端对齐 BEM 命名？
设计师习惯用“大标题”“小按钮”这种描述性语言，而 BEM 要求语义化+可复用。直接扔一个命名规范文档过去基本无效。
实操建议：
- 把设计稿里的每个视觉区块，当场映射成 BEM 类名，例如“用户头像区域” →
.user-avatar，“头像图标” →.user-avatar__icon，“头像状态点” →.user-avatar__status - 约定修饰符前缀统一用
--，且只表达明确状态（--loading、--error），禁用模糊词如--new、--v2 - 用工具校验：在 CI 中加
stylelint规则，拦截非 BEM 格式类名（如含下划线但不含双下划线或双短横）
Vue/React 里怎么写才不破坏 BEM？
框架组件常把样式逻辑分散在模板、JS、CSS 三处，容易导致 BEM 类名被动态拼接、条件丢失或命名不一致。
实操建议：
- Vue 模板中避免
:class="['btn', isPrimary ? 'btn--primary' : '']"，改用对象语法：:class="{ 'btn': true, 'btn--primary': isPrimary }" - React 中不要用
clsx拼接基础名，例如clsx('card', `card--${size}`)→ 改为显式列出：clsx('card', `card--${size}`, `card--${theme}`) - 所有 BEM 类名必须硬编码在模板中，禁止从 props 直接插值生成类名（如
:class="`item--${type}`"），否则无法静态分析和搜索
要不要给每个 BEM 类名都加 CSS Modules？
加了反而可能掩盖问题。CSS Modules 的哈希后缀（如 button__text_abc123）会让 BEM 的可读性和调试性归零，也破坏了“类名即文档”的初衷。
实操建议：
- 仅在需要局部作用域的场景启用 CSS Modules，例如第三方组件库封装；主业务组件优先用原生 BEM +
!important零容忍策略 - 如果必须用 CSS Modules，保留原始 BEM 类名作为
data-*属性用于测试定位：<div class="{styles['button__label']}" data-bem="button__label"> <li>构建时禁用 CSS Modules 对 <code>__和--的自动转义，否则button__label可能变成button_label，BEM 结构就断了
最常被忽略的一点：BEM 不是命名游戏，是约束思维路径。一旦允许某个组件破例用结构选择器或动态类名，后续维护者就会默认“这里可以松动”，整个体系会在三个月内退化回老样子。
