BEM在Vue中要求.vue文件名与Block名严格1:1映射，如UserCard.vue对应user-card；禁止非法嵌套、动态拼接类名及无上下文穿透，核心是保障IDE跳转、stylelint校验与团队协作一致性。
直接结论：BEM不是加个前缀就完事，而是要让每个类名能被IDE跳转、被stylelint校验、被新成员一眼认出归属——核心锚点是.vue文件名与Block名严格对齐。
Vue组件文件名必须1:1映射为BEM Block名
这是整个BEM结构的硬约束，不是风格偏好。UserCard.vue → Block名只能是user-card，不是card、userCard或ucard；SearchBar.vue → 必须是search-bar，不能缩写成searchbar或search。
常见翻车点：
- 模板里写
class="user-card__header"✅，但写class="__header"或class="card__header"❌——前者是“孤儿元素”，后者错配Block，DevTools里搜不到对应样式 - SCSS中声明
.user-card { }，但文件重命名为UserProfile.vue后没同步改类名，语义链立刻断裂 - 多人协作时，有人按语义起名（如
order-item），有人按文件名起名（order-summary-item），结果同一业务域出现多个Block名，scoped完全无法区分
SCSS嵌套必须防非法选择器生成
&只是字符串拼接器，它不理解BEM规则。一写错，就会产出.user-card--compact__header这种违反BEM语法的选择器（修饰符不能直接修饰元素）。
立即学习“前端免费学习笔记（深入）”；
安全写法：
-
.user-card { &--compact { padding: 8px; } &__header { color: #333; } }→ 编译为.user-card--compact和.user-card__header✅ -
.user-card { &--compact { &__header { } } }→ 编译为.user-card--compact__header❌ - 修饰符作用于Element时，必须用
&__header--large，而不是&__header &--large
动态类名必须静态声明，禁止运行时拼接
Vue的scoped依赖静态类名分析。运行时拼接字符串（如:class="'user-card--' + status"）会导致data-v-xxx属性注入失败，样式要么失效，要么泄漏到全局。
推荐做法：
- 用
clsx配合封装函数：cnUserCard({ disabled: isDisabled, compact: isCompact })→ 返回['user-card', 'user-card--disabled', 'user-card--compact']，再交由clsx()合并 - 禁止在
clsx()里传未声明的动态片段：clsx('user-card', `user-card--${dynamic}`)❌——这会让stylelint-selector-bem-pattern失效，IDE也无法补全 - 复杂状态组合建议拆成独立Modifier，避免
user-card__item--large--focused这种双修饰符写法，应改为两个class：user-card__item--large user-card__item--focused
穿透第三方组件必须用BEM容器兜底
::v-deep(.el-button)本身无作用域，单独使用等于开全局后门。必须靠外层BEM类名限定上下文。
正确姿势：
- 模板中用BEM容器包裹：
<div class="user-card__action-btn"><el-button>编辑</el-button></div> - 样式中只穿透该容器下的目标：
.user-card__action-btn ::v-deep(.el-button) { height: 32px; } - 绝对不要写
::v-deep(.el-button) { color: red; }——它会匹配项目中所有el-button，不管来自哪个业务组件
最易被忽略的点：BEM不是命名习惯，而是协作契约。一旦Block名和文件名脱钩，或动态类名脱离预定义键值对，IDE跳转、linter校验、hydration一致性都会瞬间崩塌——这些故障往往在上线后才暴露，且极难定位。
