直接全局替换BEM类名会失败，因旧项目依赖嵌套选择器、标签名或ID作用域，与BEM语义隔离不兼容，导致样式丢失、JS查询失效、第三方样式被覆盖。
为什么直接全局替换 BEM 类名会失败
因为旧项目里 CSS 通常靠嵌套选择器、标签名或 ID 控制样式作用域，.header .nav a 这类写法和 BEM 的 .header__nav-link 在语义、层级、复用逻辑上完全不兼容。强行批量重命名会导致：样式大面积丢失、JavaScript 里通过 querySelector 找元素失效、第三方组件样式被意外覆盖。
从「可验证的最小块」开始改起
别碰 body 或 app 这种顶层容器，先挑一个独立、无副作用、有明确边界的 UI 块，比如搜索框（search-bar）。它通常不依赖父级样式、DOM 结构稳定、JS 交互简单。
- 在 HTML 中给该区块外层加唯一
class，如class="search-bar" - 把原有内联或散落的样式，全部抽到新 CSS 文件中，用
.search-bar作命名空间前缀 - 按 BEM 规则拆分子元素：
.search-bar__input、.search-bar__button、.search-bar--compact - 确保所有 JS 中对该区块的引用都同步更新，例如把
document.querySelector('.search input')改成document.querySelector('.search-bar__input')
如何处理旧 CSS 中的强耦合选择器
像 section h2、ul li:first-child 这类依赖 DOM 结构的选择器，无法直接映射到 BEM。它们暴露了模板脆弱性——一旦 HTML 标签变更或顺序调整，样式就崩。
- 优先用 BEM 元素类替代：把
section h2改为.section__title，并在 HTML 中显式加上该 class - 对伪类/伪元素逻辑，封装进修饰符：如
.list-item--first替代li:first-child，由模板或 JS 控制 class 存在与否 - 遇到必须保留结构依赖的场景（如富文本内容），用
:where()或:is()降权，避免污染 BEM 命名空间，例如.content :where(h2, h3) { ... }
重构过程中的样式隔离与渐进上线
BEM 不是银弹，旧项目往往混着 CSS Modules、Tailwind 或全局 reset，直接切过去容易引发样式冲突或权重爆炸。
立即学习“前端免费学习笔记（深入）”；
- 用
@layer显式声明 BEM 样式层级，例如@layer components { .btn { ... } }，确保它不会被未归层的旧样式意外覆盖 - 在构建流程中启用 CSS Scope 检查工具（如
stylelint-selector-bem-pattern），只对新模块开启校验，避免阻塞存量代码 - 上线前务必检查 DevTools 中的 Computed Styles，确认目标元素的
font-size、margin等关键属性确实来自新 BEM 类，而不是被隐藏的旧规则兜底
真正难的不是命名规则本身，而是识别哪些样式背后绑定了运行时逻辑——比如某个 .active 是纯视觉态，还是被 JS 用来触发 API 请求。这类隐含契约，文档里没有，只能一行行翻 JS 找 classList.toggle 调用点。
