BEM与scoped分工协作：BEM管命名归属与语义，scoped管作用域边界；合用可防污染，但Block名必须严格对齐组件文件名（如UserCard.vue→user-card），动态类名须完整声明前缀，穿透样式须限定在BEM容器内。
直接结论：BEM 和 scoped 不是简单叠加，而是分工——BEM 管类名归属与语义，scoped 管作用域边界；合用能防污染，但 Block 名不对齐、动态类名漏前缀、穿透无容器这三处最容易失效。
Block 名必须严格对齐组件文件名
Vue 组件的 BEM Block 名不是命名自由发挥区，它就是组件的“身份证”。UserCard.vue → Block 名只能是 user-card，不是 card、user__card 或 UserCard。
- ✅ 正确：
.user-card、.user-card__header、.user-card--compact - ❌ 错误：
.card__header（丢失上下文）、.__header（孤儿元素）、.UserCard（大小写混用） - SCSS 中推荐用
&嵌套，但注意修饰符不能直接修饰元素：.user-card { &--compact &__header { padding: 6px; } }✅.user-card { &--compact { &__header { } } }❌（编译出.user-card--compact__header，违反 BEM）
动态类名必须完整声明前缀才能被 scoped 识别
v-bind:class 拼接的类名，如果漏掉 Block 前缀，scoped 生成的 data-v-xxx 属性不会自动补全，样式直接不生效。
- ✅ 正确：
:class="['user-card__item', isHover && 'user-card__item--hover']" - ❌ 错误：
:class="['__item', isHover && '--hover']"或:class="[baseClass, isHover && 'item--hover']"（baseClass若不含完整前缀，同样失效） - 尤其注意
computed或工具函数返回的类名，必须确保字符串值含完整 Block 前缀，例如getClassName('avatar')应返回'user-card__avatar'，而非'__avatar'
::deep() 穿透必须绑定在 BEM 容器上，不能裸写
::deep(.el-button) 这种写法本身不带作用域，若不加外层 BEM 类名限定，等于开了个全局后门，会匹配当前组件内所有 el-button，哪怕来自不同业务模块。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：模板中包裹容器
<div class="user-card__action-btn"><el-button>编辑</el-button></div>，样式写.user-card__action-btn :deep(.el-button) { height: 32px; } - ❌ 错误：
:deep(.el-button)单独写在<style scoped>里，或写成.user-card :deep(.el-button)（层级太宽，可能误触子组件内部嵌套的el-button） - Teleport 场景下，
scoped失效是常态——DOM 已脱离原组件作用域，此时应改用全局 BEM 样式，且 Block 名需全局唯一、Element/Modifier 显式声明，避免依赖:deep()
最易被忽略的一点：BEM 修饰符（--compact）只该做状态微调（如 padding、opacity），不该重定义基础样式（如 font-size、border-radius）；否则一旦基础样式变更，所有修饰符都要同步改，耦合度陡增。
