BEM不能彻底杜绝CSS全局命名冲突，仅靠命名契约降低概率；真隔离需构建层（如CSS Modules）或运行时（如Shadow DOM）。
BEM 无法“彻底杜绝”CSS全局命名冲突——它不改变CSS的全局作用域本质，只靠命名契约降低冲突概率，并把冲突转化为可定位的结构错误。真要隔离，得靠构建层（如 CSS Modules）或运行时封装（如 Shadow DOM）。
为什么 .button__icon 和 .card__icon 不会互相覆盖
浏览器匹配类名是字符串完全匹配，.button__icon 和 .card__icon 是两个不同字符串，天然不重叠。BEM 的隔离不是技术强制，而是靠 Block 名（button / card）构成逻辑命名空间，让同名 Element（__icon）归属不同上下文。
- 写错成
.icon或.button .icon就立刻失效或污染——这不是运气差，是结构断裂的明确信号 - Block 名必须业务语义明确（如
search-form），不能是泛称（box）、位置词（left-sidebar）或样式词（red-button） - Element 名不能脱离 Block 单独使用：禁止
.__icon、.icon，也不允许在其他 Block 下复用同一 Element 名而不改前缀
手拼 className 是最常翻车的环节
React/Vue 中直接用模板字符串拼 className，看似快，实则极易漏空格、错连字符、大小写不一致，CI 构建环境（Linux）对大小写敏感，本地（macOS）却跑得通。
- ❌ 危险写法：
className={`button button--${variant} ${hasIcon ? 'button__icon' : ''}`}—— 缺空格、button__icon脱离 Block 上下文、无防错 - ✅ 推荐封装生成函数：
const cn = (e, m) => `search-form${e ? '__' + e : ''}${m ? '--' + m : ''}`，调用cn('input', 'disabled')得到search-form__input--disabled - 更稳妥可用
clsx：clsx('search-form', { 'search-form__input': true, 'search-form__input--disabled': isDisabled })
微前端和第三方组件场景下，BEM 失效的临界点在哪
BEM 对第三方类名（如 .ant-btn、.el-input）完全无效，也无法阻止子应用间硬编码的 Block 名重复（比如两个子应用都用了 sales-form__submit）。
立即学习“前端免费学习笔记（深入）”；
- 微前端中 Block 名必须动态注入：从
window.__MICRO_APP_NAME__或 qiankun 的name字段读取，生成${appName}-form__submit - 包第三方组件必须用 wrapper Block：
<div class="form-field--date"><datepicker></datepicker></div>，再通过:deep(.ant-picker-input)或::global(.ant-picker-input)局部控制 - 禁止给第三方类加 BEM 修饰符：
.ant-btn--primary是无效的，它不会命中任何真实节点
真正容易被忽略的是构建配置：BEM 写得再规范，如果没启用 css-loader?modules 或没配 postcss-prefix-selector，所有类名仍裸奔在全局；而一旦开了 CSS Modules，button__text 这种命名就只是语义提示，实际编译后是 Button_button__Kx2f1 —— 隔离靠的是工具链，不是人脑记规则。
