违反bem规则的选择器包括含空格、>、+、~的复合选择器及嵌套结构（如.sidebar .title），仅允许.block、.block__element、.block--modifier三种格式，需用正则批量替换并同步更新html与js中的类名。
识别哪些CSS选择器违反BEM命名规则
直接扫描现有CSS文件，找所有含空格、>、+、~ 的复合选择器，以及带 .header .nav 这类嵌套结构的写法——这些在BEM里属于“隐式依赖”，必须拆解。BEM只允许三种合法形式：.block、.block__element、.block--modifier，其余都是重构目标。
常见错误现象包括：
-
.sidebar .title→ 应改为.sidebar__title -
.btn:hover→ 若是状态变化，应转为.btn--hover（配合JS切换class）或用&:hover在SCSS中局部处理 -
input[type="text"]→ 属性选择器无法映射到BEM语义，需改用.form-control--text类名并由HTML显式添加
用正则批量替换旧类名为BEM格式
别手动一个一个改。VS Code 或 WebStorm 支持多行正则替换，针对典型模式预设几轮：
- 匹配
\.([a-z]+)\s+\.(?:[a-z]+__)?([a-z]+)→ 替换为.$1__$2（处理.card .content→.card__content） - 匹配
\.([a-z]+)-([a-z]+)→ 视语义判断：若为修饰关系（如.btn-primary），转为.btn--primary；若为父子（如.list-item），应为.list__item - 注意避开伪类和属性选择器：替换前加负向断言，例如
(? 或 <code>(?
替换后务必全局搜索 （空格）、>、+，确认无残留嵌套选择器。
把CSS规则迁移进SCSS的@mixin和@extend要谨慎
BEM + SCSS 不等于拼命用嵌套。过度嵌套会生成冗余CSS，也违背BEM“扁平化命名”的初衷。
- 块级样式直接写在
.block { ... }下，不套&；元素和修饰符用&__element/&--modifier，但层级最多一层（禁止&__elem__subelem） - 避免
@extend跨块复用，比如@extend .btn在.card__action里——这会污染BEM边界，改用@mixin button-base()更安全 - 媒体查询统一收口：用
@include media-breakpoint-up(md)（Bootstrap）或自定义@mixin mq($break) { @media (min-width: $break) { @content; } }，不要在每个.block__elem里重复写@media
HTML模板同步更新时最容易漏掉的三类class
重构完CSS，HTML不改等于白干。以下class常被忽略：
- 动态拼接的class：如
class="btn "→ 必须补全为class="btn"（注意空格） - 第三方组件容器：比如
<div class="swiper"></div>，若要套BEM，得外层包一层<div class="carousel"><div class="swiper">...</div></div>，再写.carousel__container样式，而非直接给.swiper加BEM类 - JS操作的class：检查所有
el.classList.add('hidden')，替换成语义化BEM修饰符，如el.classList.add('dropdown--hidden')，并确保CSS里有对应规则
最麻烦的不是语法转换，而是语义对齐：一个 .icon 到底是独立 block，还是某个 .header__icon？得回溯设计系统上下文，不能光看代码结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
