bem 不降低测试代码量，但使回归测试精准定位至三处；因样式影响范围被锁死在类名字符串中，修改 user-form__button--primary 不会影响 nav-menu__button--primary，且删除组件即清除对应规则。
直接说结论：BEM 不降低测试代码量，但能让回归测试从“全站扫一遍”变成“只查三处”，因为所有样式影响范围被锁死在类名字符串里。
为什么改 user-form__button--primary 不会波及 nav-menu__button--primary
浏览器匹配样式只看 class 属性里有没有这个完整字符串，不关心 DOM 层级、祖先元素或加载顺序。user-form__button--primary 和 nav-menu__button--primary 是两条完全独立的 CSS 规则，改前者不会触发后者的重计算或重绘。
- 传统写法
.btn--primary被全局复用，改一处，所有带该类的组件都可能意外变色 - BEM 下删掉
user-form组件文件，user-form__button--primary类名从 HTML 消失，对应 CSS 规则自然失效，不残留“幽灵规则” - 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）
测试中用 getByClassName 还是 getByTestId
如果组件已严格遵循 BEM 且类名无动态拼接（比如没写 className={`card__body ${size === 'large' ? 'card__body--large' : ''}`}），直接用 getByClassName('card__body') 更轻量、更直观。
- 禁止跨 block 选择：
.user-card__avatar可测，但.user-card__avatar__icon是非法命名，说明代码已违反 BEM，该先修复再测 - Modifier 必须成对验证：断言
.button--loading时，同步检查.button是否仍在classList中，否则说明 JS 错误覆盖了基础类 - 绝对不要混用：同一组件内既写
data-testid="header"又保留.card__header，会导致测试路径分裂
最容易被忽略的是：BEM 不解决层叠权重问题。如果 card__title--large 和 card__title--small 冲突，不是命名错了，而是 CSS 引入顺序或 !important 导致的——这得靠构建流程里的 stylelint-selector-bem-pattern 拦住，而不是靠命名本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
