BEM与scoped分工协作：BEM管命名意图与模块归属，scoped管作用域边界；合用可防样式污染，但Block名必须严格对齐组件文件名、动态类名须完整声明、穿透须用BEM容器限定。
scoped 和 BEM 不是二选一，而是分工明确的组合：前者管作用域边界，后者管命名意图。单用 scoped 会掩盖组件内样式混乱，只写 BEM 又挡不住全局污染——两者合用才能真正防崩。
为什么不能直接把BEM类名扔进scoped就完事
常见错误是照搬页面级 BEM 命名，比如在 UserCard.vue 里写 .user__avatar 或 .card__header。这会导致两个问题：
- Block 名不唯一，多个组件可能共用
card，scoped无法区分谁是谁 - 动态类名（如
:class="['user-card__item', isHover && 'user-card__item--hover']"）若漏写完整前缀，scoped生成的data-v-xxx属性不会自动补全，样式直接失效 -
scoped不校验类名结构，你写.__header或.user-card--compact__item都能编译通过，但语义已错乱
UserCard.vue 中 BEM Block 名必须与文件名严格一致
Block 名不是凭感觉取的，它就是组件的“身份证”。Vue 组件名 UserCard.vue → 小写短横线格式 user-card，这是硬约束。
- ✅ 正确：
.user-card { } .user-card__header { } .user-card--compact { } - ❌ 错误：
.card { }（丢失上下文）、.user__card { }（颠倒主次）、.UserCard { }（大小写混用） - SCSS 中用
&嵌套可避免手误：.user-card { &__header { padding: 12px; } &__avatar { width: 40px; } &--compact &__header { padding: 6px; } }
穿透第三方组件时，::v-deep 必须配合 BEM 容器限定范围
想改 el-button 样式？别在 scoped 里直接写 .el-button——它根本匹配不到，因为 el-button 元素没有 data-v-xxx 属性。
- 正确做法：模板中用 BEM 容器包裹第三方组件：
<div class="user-card__action-btn"><el-button>编辑</el-button></div> - 样式中只穿透该容器下的目标：
.user-card__action-btn ::v-deep(.el-button) { height: 32px; padding: 0 16px; } - ⚠️ 注意：
::v-deep本身不带作用域，必须靠外层 BEM 类名（如.user-card__action-btn）兜底，否则等于开了个全局后门
BEM Modifier 不该重定义基础样式，而应专注状态变更
user-card--compact 这类修饰符常被滥用：有人在里面直接写 font-size: 12px 或 border-radius: 0，结果导致基础样式和修饰逻辑耦合，后续维护难。
立即学习“前端免费学习笔记（深入）”；
- Modifier 只做“叠加”或“微调”：
padding、opacity、display等不影响布局结构的属性 - 基础样式必须稳定在 Block 或 Element 上，比如
.user-card__avatar的width、border-radius永远不变 - 如果真需要大改，说明这不是 Modifier 能解决的，应该拆新 Block（比如
user-card-minimal）
scoped 的关键不在语法对不对，而在每个类名是否能回答三个问题：它属于哪个组件？它是什么角色（Block/Element/Modifier）？它在哪种上下文中生效？漏掉任一环，就容易在半年后被自己或同事删掉“没用的类名”，然后发现某处样式突然崩了。 
