大概率会炸样式，因旧CSS大量使用高权重选择器（如ID、深层嵌套）和!important，导致BEM类名权重不足；应新功能用纯BEM、旧区域最小包裹，通过命名空间隔离、重置基础样式、禁止跨体系组合等方式共存。
Legacy项目里直接加BEM类名会炸样式吗？
大概率会，但不是因为BEM本身有问题，而是旧CSS里大量使用标签选择器、ID选择器、嵌套过深的后代选择器，甚至!important硬编码。BEM的.block__element--modifier结构一旦和原有规则同级出现，权重往往压不过#header .nav li a:hover这类老写法。别急着全局替换，先用devtools点开几个关键模块，看 computed styles 里真正生效的是哪条规则——十有八九是旧选择器在“赖着不走”。
怎么让BEM类名和旧类名共存且互不干扰？
核心原则：新功能/新组件用纯BEM，旧区域只做最小侵入式包裹。具体操作：
- 给旧DOM容器加一个带命名空间的BEM根类，比如
legacy-wrapper，并在其CSS文件开头写.legacy-wrapper { all: unset; }（慎用，仅限隔离强污染场景）；更稳妥的是用[class^="legacy-"]属性选择器限定作用域 - 新写的BEM组件必须显式声明
box-sizing: border-box、重置margin/padding，避免继承旧全局重置规则的副作用 - 禁止在BEM CSS里写
.old-header .new-button这种跨体系组合，宁可多写一个.old-header__button过渡类
旧类名批量替换成BEM时，哪些正则表达式能少踩坑？
别信“一键替换”脚本。真实项目里，btn-primary可能是按钮，也可能是<div class="btn-primary">里面的文字，还可能被JS用<code>el.classList.contains('btn-primary')硬编码调用。安全做法：
- 先用
grep -r "btn-primary" src/ --include="*.html" --include="*.js"确认所有上下文 - HTML中替换时保留旧类名作为注释：
<button class="btn-primary /* legacy */ c-button c-button--primary"> - JS中改
querySelector('.btn-primary')为querySelector('[class*="btn-primary"]')临时兼容，后续再收敛到data-role="primary-button"这类语义属性
Webpack/Vite里如何让BEM CSS不被旧全局样式污染？
关键不在打包工具，而在加载顺序和作用域控制：
立即学习“前端免费学习笔记（深入）”；
- 确保BEM CSS在HTML里
<link>位置严格位于旧CSS之后（哪怕只是逻辑上后加载） - 用
@layer显式分层（需PostCSS插件支持）：@layer legacy { /* 旧规则 */ }+@layer bem { /* 新BEM规则 */ }，现代浏览器能按层覆盖 - 如果项目还在用
import 'legacy.css'，就在BEM模块顶部加/** @layer bem; */注释，配合postcss-import自动归层
BEM不是银弹，它解决的是命名混乱，但Legacy项目的真正难点永远在“谁在JS里偷偷改了style.color”或者“那个body上的font-size: 62.5%到底影响了多少层”。每次只动一个模块，上线后盯住Sentry里的样式相关报错——比任何文档都准。
