必须重命名的是.header、.card、.modal等有明确语义边界的模块类，以及.list、.item、.content等高频复用、命名模糊、带嵌套的类；工具类、状态类和第三方类通常跳过。
识别哪些类名必须重命名
不是所有 class 都要改。BEM 只约束组件级样式，比如 .header、.card、.modal 这类有明确语义和边界的模块；而工具类（.text-center、.mt-4）、状态类（.is-loading、.hidden）或第三方库类（.swiper-slide）通常跳过。重点盯住那些在 HTML 中反复出现、带层级嵌套、且命名模糊的类，比如 .list、.item、.content——它们十有八九是 BEM 改造的入口。
用正则批量替换时注意块/元素/修饰符边界
手动一个一个改效率低还易错。可以用编辑器（VS Code / WebStorm）的正则替换，但得写对模式。例如把 .user-list .user-item 转成 .user-list__item，不能简单替换 .user-item → .user-list__item，否则会污染独立的 .user-item（如在侧边栏也用了）。推荐分步：
- 先定位上下文：搜索
<div class="user-list[^">[\s\S]*?<div class="user-item，确认是否真属同一块 - 再替换元素：匹配
class=" user-list>]*>[\s\S]*?class="user-item([^"]*)"，替换成 <code>class="user-list__item$1" - 修饰符别硬套：不要把
.user-item.active直接改成.user-list__item--active，得看它是否属于该块的状态——如果.active是全局交互态，保留原样更合理 - 这个类是否在其他地方单独使用过？是 → 保留原始 BEM 块名
- 它的样式是否完全依赖父容器才成立？是 → 才用
父块__子元素 - 有没有可能未来抽成独立组件？有 → 别塞进父块命名空间
处理嵌套组件时避免 BEM 套娃
比如一个 .card 里嵌了 .button，有人会写成 .card__button，但若 .button 本身已是独立可复用组件，就该保持 .button，只加必要修饰：.card__footer .button 或 .card__action-button。判断标准很简单：
否则很快会出现 .page__section__card__header__title 这种反模式。
立即学习“前端免费学习笔记（深入）”；
PostCSS 插件能自动化但不解决语义问题
像 postcss-bem 或 postcss-bem-linter 可以帮你检查命名合规性，甚至生成 __/-- 形式，但它们不会告诉你「这个 .sidebar-nav 到底该叫 .nav 还是 .sidebar__nav」——这取决于它是否脱离 .sidebar 就失效。工具只校验格式，不校验职责。真正卡点在于设计系统层面的组件拆分共识：哪些算「块」，哪些只是「局部样式」。没对齐这点，自动化只会放大混乱。
最常被忽略的是 CSS 作用域与 JS 逻辑耦合。比如 JS 里写了 document.querySelector('.user-item')，改名后必须同步更新，否则运行时就挂。迁移前建议先 grep -r "\.user-item" src/，把所有引用都列出来一并处理。
