大概率会炸样式，因旧CSS大量使用高权重选择器（如ID、深层嵌套）和!important，导致BEM类名权重不足；应新功能用纯BEM、旧区域最小包裹，通过命名空间隔离、重置基础样式、禁止跨体系组合等方式共存。
Legacy项目里直接加BEM类名会炸样式吗？
大概率会，但不是因为BEM本身有问题，而是旧CSS里大量使用标签选择器、ID选择器、嵌套过深的后代选择器，甚至
硬编码。BEM的
结构一旦和原有规则同级出现，权重往往压不过
这类老写法。别急着全局替换，先用
点开几个关键模块，看 computed styles 里真正生效的是哪条规则——十有八九是旧选择器在“赖着不走”。
怎么让BEM类名和旧类名共存且互不干扰？
核心原则：新功能/新组件用纯BEM，旧区域只做最小侵入式包裹。具体操作：
给旧DOM容器加一个带命名空间的BEM根类，比如
，并在其CSS文件开头写
（慎用，仅限隔离强污染场景）；更稳妥的是用
属性选择器限定作用域
新写的BEM组件必须显式声明
、重置
/
，避免继承旧全局重置规则的副作用
禁止在BEM CSS里写
这种跨体系组合，宁可多写一个
过渡类
旧类名批量替换成BEM时，哪些正则表达式能少踩坑？
别信“一键替换”脚本。真实项目里，
可能是按钮，也可能是
!important.block__element--modifier#header .nav li a:hoverdevtoolslegacy-wrapper.legacy-wrapper { all: unset; }[class^="legacy-"]box-sizing: border-boxmarginpadding.old-header .new-button.old-header__buttonbtn-primary里面的文字，还可能被JS用el.classList.contains('btn-primary')
硬编码调用。安全做法：
先用
grep -r "btn-primary" src/ --include="*.html" --include="*.js"
确认所有上下文
HTML中替换时保留旧类名作为注释：
querySelector('.btn-primary')
为
querySelector('[class*="btn-primary"]')
临时兼容，后续再收敛到
data-role="primary-button"
这类语义属性
Webpack/Vite里如何让BEM CSS不被旧全局样式污染？
关键不在打包工具，而在加载顺序和作用域控制：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
确保BEM CSS在HTML里
@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里的样式相关报错——比任何文档都准。