bem通过单类名字符串匹配实现样式隔离与可预测性。它杜绝dom结构依赖、避免幽灵规则、强制显性修饰符、禁止组合选择器、要求文件组织与工具链协同，确保样式作用域清晰、权重恒定、查找高效。
因为BEM把样式生效条件锁死在类名字符串本身，改 user-card__avatar--rounded 只会影响显式声明该字符串的元素，不会波及 profile-card__avatar--rounded 或任何其他组件。
浏览器只做字符串匹配，不看DOM结构
传统写法如 .card .title 依赖父容器存在且结构稳定；一旦把 <h3 class="title"></h3> 移到新容器里，样式就静默失效。BEM 下 card__title 是独立标识符，哪怕你把它丢到 最外层，只要 class 属性里有这个完整字符串，样式就生效。
- DOM 重构（比如从
<div class="card"> <h3 class="card__title"> 改成 <code><section class="card"><header class="card__title"></header></section>）不影响样式，只要类名不变 - 删掉
UserCard.vue文件后，user-card__avatar在 HTML 中彻底消失，对应 CSS 规则自然失效，不会残留“幽灵规则”去误匹配新组件 - 搜索
grep -r "search-form__submit--loading" src/能 100% 定位：HTML 模板、CSS 文件、JS 动态拼接点（用 AST 工具可扫className="search-form__submit--loading"） - 错误写法：
className={isDisabled ? 'button--disabled' : ''}→ 缺失基础类，样式丢失 - 正确写法：
className={clsx('button', { 'button--disabled': isDisabled })}或封装bem('button', { disabled: isDisabled }) - 禁止修饰符嵌套：
button--primary--disabled违反 BEM 结构，应拆为两个独立 modifier：button button--primary button--disabled -
stylelint-selector-bem-pattern必须启用，否则.btn、.modal-close这类传统命名会畅通无阻 - 权重恒为 0,1,0，覆盖逻辑可预测；不用靠
!important或更长选择器硬刚 - 浏览器哈希查找
card__submit--loading，一次命中，不回溯；而.card .card__submit:hover需先找所有card__submit元素，再逐个向上查card父级，低端设备上耗时可能高 4 倍 - 第三方 UI 库（如 Ant Design）的类名不强行改，但在外层包一层
my-dashboard__ant-table-wrapper就能隔离样式泄漏
Modifier 必须挂载在基础 Block 或 Element 上
写 button--disabled 却漏掉 button 基础类，样式就直接不生效——这不是 bug，是 BEM 的显性依赖设计。它强制你在 JS 拼接时必须带上 Block 前缀，避免“改一处、炸一片”的隐式传播。
类名即作用域，不靠选择器权重兜底
BEM 禁用 button.card__submit、#submit-btn、[data-role="submit"] 这类组合选择器，所有样式都由单类名驱动。这意味着：
真正容易被忽略的是：BEM 不是光改类名就行，它要求 CSS 文件也按 Block 组织（user-card.css 只写 user-card 相关类），JS 拼接必须用工具函数兜底，CI 流程里 stylelint 必须失败阻断——少一个环节，隐式依赖就悄悄回来。
