bem通过block__element--modifier完整命名锁定样式作用域，使user-form__button--primary与nav-menu__button--primary互不干扰；浏览器仅按类名字符串匹配，不依赖dom层级、祖先元素或加载顺序，修改一个按钮样式不会影响侧边栏同名按钮。
因为BEM把样式影响范围锁死在类名字符串里，改 user-card__avatar--rounded 不会波及 profile-card__avatar--rounded，回归测试只需 grep 该类名，就能 100% 定位所有关联代码和用例。
为什么改一个按钮样式不会影响侧边栏同名按钮
BEM 不靠 DOM 层级、祖先元素或加载顺序来决定样式归属，浏览器只做字符串匹配：元素 class 属性里有没有 nav-menu__button--primary 这个完整字符串。哪怕两个按钮都叫 button--primary，只要前缀不同（user-form__ vs nav-menu__），它们就是完全隔离的规则。
- 传统写法
.btn--primary被全局复用，改一处，所有带该类的第三方组件、老页面都可能意外变色 - BEM 下，
user-form__button--primary的 CSS 规则只对显式声明该类的 HTML 生效，删掉这个组件文件，对应样式自然失效，不残留“幽灵规则” - Storybook 或组件快照测试中，每个 Block（如
user-form）可独立运行，改它不影响search-bar的视觉验证
回归测试时如何精准圈定影响范围
传统 CSS 修改 .sidebar .item a，你得人工排查所有含 sidebar 的页面；BEM 下，搜 sidebar__item-link 就能立刻定位：
- 所有使用该类的 HTML 模板（
grep -r "sidebar__item-link" src/） - 对应的 CSS 文件（通常命名一致，如
sidebar.css） - JS 中动态拼接该类的位置（AST 扫描
className="sidebar__item-link"） - CI 流程里可自动触发关联 Storybook 测试（如
Sidebar.stories.tsx）
为什么 BEM 让“改完就上线”更可靠
它不防错，而是把所有隐性依赖显性化——样式生效与否，只取决于一个字符串是否出现在 class 属性里。这意味着：
- 重构 DOM 结构（比如把
<div class="card__body"> 换成 <code><section class="card__body"></section>）完全不影响样式，只要类名不变 - 删除一个组件（如
NotificationCard.vue），它的所有类名（notification-card__close）从 HTML 消失后，CSS 规则自动失效，不会污染其他模块 - Modifier 必须挂载在基础 Block 或 Element 上：
card--featured合法，单独用featured就是漏前缀，CI 阶段应被stylelint-selector-bem-pattern拦住
最容易被忽略的是：BEM 不解决层叠权重问题。如果 card__title--large 和 card__title--small 冲突，不是命名错了，而是 CSS 引入顺序或 !important 没管住——BEM 只管名字，不管谁覆盖谁。
