必须用stylelint-selector-bem-pattern插件并严格配置preset、componentName、ignoreSelectors三项参数，否则.btn-primary等非BEM写法零报错；selector-class-pattern仅正则匹配，无法校验语义与结构合法性。
直接改旧类名会炸，真正要动的是命名入口和校验链路。
哪些旧类名必须立刻加白名单隔离
老项目里像 .btn、.card、.nav 这类泛化类名，是新同事查样式时最先撞上的墙。它们在 JS 里被 document.querySelector('.btn') 硬编码，在 HTML 里被随意复用，还常带 !important 覆盖。不处理这些，新同学连按钮样式从哪来都找不到。
- 用
stylelint-selector-bem-pattern配置ignore列表，把它们列为例外，避免校验报错阻塞提交 - 在 SCSS 中为它们补一层 BEM 封装：比如
.btn存在时，定义.button { @extend .btn; }，后续新增逻辑只走.button__icon这条线 - 全局搜索
className=["']\.[a-z]+["']，找出所有 JS 中硬依赖的类名，加别名过渡，不删原名
新组件怎么写才让新同事一眼看懂结构
新人打开一个组件文件，如果看到 class="header-nav__item"，再看 CSS 文件里只有 .header-nav__item 一条规则，他就知道这个元素属于 header-nav 块，且不依赖父级结构；但如果看到 .header .nav-item，他就得翻 HTML 才能确认父容器是不是 .header，一动就崩。
- 每个新组件起始就定义
const BLOCK = 'user-profile-card'，所有类名基于它生成，杜绝手拼 - 禁止写后代选择器：
.user-profile-card .title是毒药，必须是.user-profile-card__title - Element 名不用重复 Block，
menu__menu-item改成menu__item，否则新人 grep 时会漏掉
怎么让 BEM 规则自己拦住错误，而不是靠 Code Review
靠人提醒“别写 .card-title，要写 .card__title”没用，新人第一次写错，第二次可能还错。规则得进工具链，且只作用于真实变更。
立即学习“前端免费学习笔记（深入）”；
- pre-commit 脚本必须用
git diff --cached --name-only --diff-filter=ACM | grep '\.scss$'精准过滤本次提交的样式文件 -
stylelint-selector-bem-pattern的componentName正则不能用默认值，必须锁死为'[a-z][a-z0-9]+(-[a-z0-9]+)*'，否则CardTitle或_input都能过 - HTML 层也要校验：
class="card__title--large--dark"这种双 modifier 必须报错，正则用^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$
最难的不是记住双下划线，而是每次写新类名前停半秒：这个东西脱离当前组件还能用吗？改它的 modifier 会不会意外影响别人？BEM 不是贴标签，是划边界——边界不清，再多工具也救不了接手的人。
