bem通过block__element--modifier结构将样式归属、状态和层级显式编码进类名，使浏览器仅依赖字符串匹配生效，不依赖dom路径或祖先元素；搜user-card__avatar--rounded可100%定位所有影响点，删组件文件后样式零残留，重构dom时类名不变则样式不受影响。
长命名本身不降低回归测试成本，真正起作用的是 BEM 强制的 block__element--modifier 结构——它把样式归属、状态和层级关系全部显式编码进类名字符串里，让浏览器只靠字符串匹配生效，不依赖 DOM 路径或祖先元素。
为什么搜 user-card__avatar--rounded 就能 100% 定位所有影响点
BEM 类名是自解释的唯一标识符，不是语义标签。浏览器渲染时只检查元素 class 属性是否包含该完整字符串，不关心它嵌在哪层、有没有父级、甚至是否被 display: none 隐藏。
- 传统写法
.avatar搜索结果可能命中头像、缩略图、图标等十几个组件，改一处得人工排查所有上下文 - BEM 下
grep -r "user-card__avatar--rounded" src/直接返回：HTML 模板位置、CSS 文件（通常叫user-card.css）、JS 动态拼接处（AST 可扫描className="user-card__avatar--rounded"） - Storybook 中只要重跑
UserCard.stories.tsx，不用牵连ProfileCard或SearchResultItem
为什么删掉一个组件文件，样式不会残留“幽灵规则”
传统 CSS 规则靠选择器权重和层叠生效，哪怕对应 HTML 已删除，.sidebar .item 这类规则仍留在样式表里，可能意外匹配新组件；BEM 规则只对显式声明该类的元素生效。
- 删掉
UserCard.vue→ 所有user-card__*类名从 HTML 消失 → 对应 CSS 规则自然失效，无残留 - 重构 DOM 时把
<div class="user-card__body"> 改成 <code><section class="user-card__body"></section>，只要类名不变，样式零影响 - CI 流程中可加
stylelint-selector-bem-pattern拦截漏前缀写法（如单独用--rounded），防止修饰符脱离 Block/Element 上下文 - 传统写法
.title--large全局复用，改一个颜色可能让第三方弹窗、侧边栏、搜索建议全变色 - BEM 下
card__title--large和profile-card__title--large是两条互不干扰的 CSS 规则，哪怕都用了font-size: 24px，修改前者不影响后者 - 回归测试只需
grep该类名，就能确认所有关联代码和快照用例，不需要人工判断“这个.title是不是指同一个东西”
为什么 card__title--large 不会误伤 profile-card__title--large
BEM 的隔离性来自前缀强制绑定，不是靠 CSS 作用域或构建工具。两个类名是完全独立的字符串，浏览器根本不认为它们有关联。
最容易被忽略的是：BEM 不解决层叠顺序问题。如果 card__title--large 和 card__title--small 同时存在且属性冲突，不是命名错了，而是 CSS 引入顺序没管住，或者用了 !important ——BEM 只保证名字唯一，不管谁覆盖谁。
