bem能显著降低回归测试压力，因其将样式影响范围锁死在类名字符串中，改user-card__avatar--rounded不会波及profile-card__avatar--rounded，grep该类名即可100%定位所有关联代码和用例。
直接用 BEM 不能自动降低回归测试出错率，真正起作用的是：类名变成可 grep 的唯一标识符 + 工具链能精准定位所有关联点。没这俩，BEM 只是多打几个下划线。
为什么搜 user-card__avatar--rounded 就能 100% 定位所有影响点
BEM 类名不是语义标签，而是浏览器渲染时的字符串匹配开关。只要 HTML 元素的 class 属性里完整包含这个字符串，样式就生效；不包含，就完全无关——和它嵌在哪层、有没有父级、甚至是否被 display: none 隐藏都无关。
- 传统写法
.avatar搜索会命中头像、缩略图、图标、用户列表项等十几个组件，改一处得人工翻上下文 - BEM 下执行
grep -r "user-card__avatar--rounded" src/直接返回三类位置：HTML 模板（如UserCard.vue）、CSS 文件（通常叫user-card.css）、JS 动态拼接处（如className="user-card__avatar--rounded"） - Storybook 中只需重跑
UserCard.stories.tsx，不用牵连ProfileCard或SearchResultItem
删掉一个组件文件，为什么样式不会残留“幽灵规则”
传统 CSS 规则靠选择器权重和层叠生效，哪怕对应 HTML 已删除，.sidebar .item 这类规则仍留在样式表里，可能意外匹配新组件；BEM 规则只对显式声明该类的元素生效，没有 class 就没有匹配。
- 删掉
NotificationCard.vue后，所有notification-card__close类从 HTML 消失，对应 CSS 规则自然失效 - 不存在“改了按钮颜色，结果弹窗里的按钮也变色”这种跨组件污染
- 重构 DOM 时把
<div class="card__body"> 换成 <code><section class="card__body"></section>，只要类名不变，样式不受影响怎样让 BEM 真正卡住回归风险，而不是形同虚设
BEM 本身不防错，必须靠工具链强制拦截非法结构。漏配
stylelint-selector-bem-pattern的任一参数，CI 里就等于没开。- 必须装插件：
npm install stylelint-selector-bem-pattern --save-dev -
stylelint.config.js中三项硬配置缺一不可：componentName: '[a-z][a-z0-9-]*'（禁用大写和破折号开头）、ignoreSelectors: [/^\..+:(hover|focus|active|disabled)$/]（放过伪类）、preset: 'bem'（只认block__element--modifier结构） - 写成
user_name或card-element会被工具链跳过校验——正则匹配失败，直接不检查 - 禁止手拼字符串：
className={`${base}--${size}`}会让搜索失效、IDE 无法跳转、重构漏改一处就埋雷
最容易被忽略的是：BEM 不解决层叠顺序问题。两个合法类名
card__title--small和card__title--large同时存在且属性冲突，不是命名错了，而是 CSS 引入顺序或!important没管住——BEM 只保证名字唯一，不管谁覆盖谁。 - 必须装插件：
