bem与scoped分工协作：bem管命名归属与语义，scoped管作用域边界；合用可防样式污染，但block名不对齐、动态类名未声明、穿透无容器三处易翻车。
直接结论：BEM 和 scoped 不是“加个前缀就完事”，而是分工协作——BEM 管命名归属与语义，scoped 管作用域边界；合用能防样式污染，但 Block 名不对齐、动态类名未声明、穿透无容器这三处最容易翻车。
Block 名必须严格对齐组件文件名
Vue 组件的 BEM Block 名不是随便起的，它得直接映射到文件名（小写 + 短横线）。比如 UserCard.vue → Block 名只能是 user-card，不是 card 或 user-card-component。
- 常见错误：
user-card__header写成__header或card__header，DevTools 里搜不到对应样式，协作时类名归属混乱 - 文件名
SearchBar.vue→ Block 名必须是search-bar；OrderSummaryItem.vue→ 是order-summary-item，不能缩写为order-item - 模板中所有类名必须以
search-bar或order-summary-item开头，禁止出现孤立的__input这类“孤儿元素”
SCSS 嵌套必须防编译污染
BEM 的嵌套规则和 SCSS 的 & 很配，但一不留神会产出非法选择器。比如 .user-card { &--compact { &__header { } } } 编译后变成 .user-card--compact__header，这违反 BEM（修饰符不能直接修饰元素）。
- 正确写法是让修饰符只作用于 Block 级，再通过层级控制内部元素：
&--compact &__header编译后是.user-card--compact .user-card__header，合法且语义清晰 - Element 必须用双下划线连接，且不能脱离 Block 单独存在：
user-card__avatar✅，__avatar❌，avatar❌ - Modifier 用双横线，只叠加变更：
user-card--compact可调padding，但不该改border-radius或font-size
穿透第三方组件必须用 BEM 容器限定范围
想定制 el-button 样式？别在 <style scoped></style> 里直接写 ::v-deep(.el-button) —— 它会匹配当前组件内所有 el-button，哪怕来自不同业务上下文。
- 正确做法：模板中用 BEM 容器包裹：
<div class="article-form__submit-btn"><el-button>提交</el-button></div> - 样式中仅穿透该容器下的目标：
.article-form__submit-btn :deep(.el-button) { height: 36px; } - 这样改的只是「文章表单里的提交按钮」，不会误动「用户设置页的保存按钮」；未来删样式，直接删掉
article-form__submit-btn上下文即可
动态类名必须静态声明才能保 scoped 生效
v-bind:class 里拼接的类名（如 :class="[baseClass, isCompact ? baseClass + '--compact' : '']"）如果没在模板中静态出现过，scoped 编译器不会为其生成属性选择器，样式就失效。
- 解决办法：在模板任意位置静态声明所有可能用到的类名，哪怕只是注释掉：
<!-- user-card--compact --> - 或统一用
$style模块化方式（需配置lang="scss" module），但会失去 BEM 的语义可读性 - 更稳妥的做法是把修饰符逻辑收进组件内部，用
computed返回完整类名：computedClasses() { return `${this.baseClass}${this.isCompact ? ` ${this.baseClass}--compact` : ''}` }
真正容易被忽略的点不在语法层面，而在协作习惯：Block 名一旦定死就不能随意改，否则所有子元素类名都得同步更新；而 :deep() 的使用必须绑定到明确的 BEM 容器上，否则就等于把 scoped 的隔离墙凿了个洞——名字再规范，作用域一破，整个模块的样式稳定性就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
