scoped样式不等于BEM，二者需手动协同：scoped仅添加属性选择器，BEM依赖人为命名契约；Block名须与文件名一致，Element/Modifier须依附Block，动态类需静态声明，SCSS嵌套须合规，禁止混用多Block，穿透样式须限定范围，Teleport内容用全局BEM，模板中类名必须显式写出。
scoped样式不等于BEM，两者必须手动协同
Vue的scoped只给CSS加属性选择器（如.user-card[data-v-f3f2e1c4]），它不管类名叫什么——你照样可以写.btn、.header，然后在十个组件里重复定义。BEM不是Vue内置功能，是靠人严格执行的命名契约。没对齐Block名、乱用__或--，scoped只会帮你“安全地污染”更多地方。
- Block名必须与组件文件名完全一致：比如
UserCard.vue→ Block只能是user-card，不能是card或userCard - Element和Modifier必须依附Block存在：
user-card__avatar✅，__avatar❌（编译后变成__avatar[data-v-xxx]，但模板里根本没这个类） - 动态类名要静态声明：
:class="['user-card', { 'user-card--loading': isLoading }]"✅，:class="'user-card--' + status"❌（scoped无法识别拼接字符串，不会注入属性）
SCSS嵌套时&不能替代BEM语义
很多人用&__content写法图省事，但&只是语法糖，它不校验命名是否合规。如果父选择器本身就不符合BEM（比如写了.card），那&__header生成的就是.card__header——这已经不是BEM，而是自造的混乱前缀。
- 正确写法：从Block开始，显式声明
.user-card，再用&__avatar、&--compact - 禁止在同一个SCSS文件里混用多个Block：比如同时写
.user-card和.document-item，会破坏模块边界 - Modifier只表达状态变更：
user-card--disabled可调opacity和cursor，但不该改font-size或padding——这些属于Block基础样式
穿透子组件样式时，BEM容器必须前置
用:deep()改第三方组件（如el-button）样式时，直接写:deep(.el-button)等于放弃隔离——它会匹配页面里所有el-button，且绕过BEM语义。真正可控的方式，是把第三方节点包进你的BEM结构里。
- 推荐做法：给第三方组件加BEM类名，比如
<el-button class="user-card__submit-btn"></el-button>，然后在父组件scoped中只写.user-card__submit-btn - 若必须穿透，限定范围：
:deep(.user-card__actions .el-button)✅，:deep(.el-button)❌ - Teleport内容不能依赖
scoped：DOM已脱离原组件作用域，应使用全局BEM样式，且Block名需全局唯一（如modal不能在多个弹窗组件里重复）
BEM类名在模板里必须显式写出
Vue不会自动给你补BEM前缀。哪怕你在SCSS里写了.user-card { &__name { ... } }，模板里仍要手写class="user-card__name"。漏写、缩写、拼错，都会导致样式失效，且scoped无法帮你发现。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：
<div class="name"></div>→ 应为<div class="user-card__name"></div> - 第三方组件插槽内容也要遵循BEM：
<template><span class="user-card__status">在线</span></template> - 组件名含大写或数字时统一转小写+短横线：
PDFViewer.vue→ Block为pdf-viewer，不是pdfviewer或PdfViewer
scoped配合的关键，不在工具链自动补全，而在每个class属性值是否经得起追问：“它属于哪个Block？它是不是Element或Modifier？它的命名能不能让别人一眼看出归属和意图？”——这类问题没有编译器能替你答。 
