直接套用bem会炸开老项目，因历史代码依赖嵌套选择器、id和全局类名；需保留旧类作兼容层，增量注入bem类名，禁用后代选择器，并清理!important与id以恢复作用域隔离。
为什么直接套用 .block__element--modifier 会炸开老项目？
因为历史代码里大量依赖嵌套选择器、ID、全局类名，甚至内联样式。BEM不是贴膏药，是重划样式作用域边界。强行把 .header .nav ul li a 改成 .header__link 而不清理上下文依赖，会导致样式丢失、JS钩子失效、伪类行为异常。
实操建议：
- 先用浏览器开发者工具的「Computed」面板，查清每个关键节点实际生效的样式来源（尤其是
!important和内联 style） - 禁止一步到位重命名：保留旧类名作为「兼容层」，新增 BEM 类并逐步迁移，例如：
<div class="old-header header"> <li>特别注意 JS 通过 <code>document.querySelector('.old-nav > li')获取元素的逻辑——这类选择器必须同步更新或加双保险
如何给已有结构“无痛”注入 BEM 命名？
核心原则：不改 DOM 结构，只增类名；不删旧类，只控权重。BEM 在这里不是重构 HTML，而是为现有节点打上语义标签。
示例：一段老导航 HTML
<nav class="top-nav"><ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">首页</a></li> </ul></nav>
对应 BEM 注入方式：
- 外层容器加
block：保留class="top-nav"，追加nav - 子元素加
__element：class="nav-list"→class="nav-list nav__list" - 避免层级穿透：不再写
.nav__list li，而是给<li>直接加nav__item，<a></a>加nav__link - 所有 CSS 规则必须以 block 名开头，禁用任何后代选择器（如
.nav .link）
怎么处理老项目里满天飞的 !important 和 ID 选择器？
ID 选择器权重远高于 BEM 类名，!important 更是直接绕过层叠规则——这两者会让 BEM 的模块化失效。
解决路径很明确：
- 用
grep -r "id=" src/或浏览器 Elements 面板筛选出所有含 ID 的标签，逐个评估：是否真需唯一性？能否转为data-id或 BEM modifier？ -
!important不是加在 BEM 规则里来对抗它，而是定位源头：90% 来自第三方库或早期 hack，应抽离到独立legacy.css并用@layer legacy控制层序 - 若必须保留某条
!important样式（如覆盖 iframe 内样式），用更高特异性 BEM 组合：比如.nav__link.nav__link--active !important，而非扩大作用域
哪些地方最容易在 BEM 迁移中漏掉？
最常被忽略的是动态类名拼接和 CSS-in-JS 场景。
- Vue/React 中
class="header" :class="['header__logo', {'header__logo--hidden': isHidden}]"这类写法没问题，但若原逻辑是el.className += ' active'，必须改成完整 BEM 类名el.classList.add('header__logo--active') - 伪类状态（
:hover,:focus-within）不能只靠 BEM 类控制，要确保基础类已存在，例如.button__text:hover前提是元素有button__text类，而不是靠父级.button:hover .text - 媒体查询里的 BEM 类必须完整复现，不能简写：写
@media (max-width: 768px) { .header__logo--mobile { ... } }，别漏掉header__logo
BEM 在老项目里不是命名游戏，是把散落的样式责任收归到每个组件自身——一旦某个 __element 类开始跨 block 复用，或者 modifier 变得无法穷举，说明边界已经模糊，得回头重新切分 block。
