bem不可被scoped替代，因scoped仅防外溢、不治内乱；bem通过user-card__avatar等命名明确样式归属，强制语义边界与模块契约。
因为 BEM 能在不依赖构建工具的前提下，把「这个样式归谁管」这个问题直接刻进类名里——user-card__avatar 比 avatar 或 .user-card .avatar 更早、更确定地回答了作用域归属问题。
Vue 的 scoped 为什么不能替代 BEM
scoped 只解决样式外溢，不解决组件内部命名混乱。它会给所有选择器加 [data-v-xxx]，但无法阻止你在同一个 .vue 文件里写两个 title 类，也无法告诉你哪个 icon 属于按钮、哪个属于卡片。
-
scoped对第三方组件（如el-button）无效，必须靠 BEM 容器包裹 +::v-deep才能安全定制 - 父子组件都用
scoped时，子组件根节点会同时携带父、子两个data-v-属性，可能意外触发父级样式 - 大量
data-v-属性在 SSR 或微前端场景下会增加 HTML 体积，且对后端模板工程师不友好
user-card__avatar 这种命名到底在表达什么
它不是“为了长而长”，而是在声明一个契约：user-card 是独立功能单元（对应 UserCard.vue），__avatar 是其直属语义子部分，--small 若存在，则只改变该元素的尺寸逻辑，不牵连头像圆角或边框色。
- 块名必须与组件文件名一致，小写+短横线：
UserCard.vue→user-card，不是card或profile-card -
__只允许出现在块与**直接子元素**之间，禁止user-card__header__title这类三层嵌套 - 修饰符必须绑定到具体块或元素：
user-card--compact合理，is-compact不合规，因为它丢失了归属
BEM 在 Vue 中最容易被踩的三个坑
不是不会写，而是写得“看起来像 BEM”，实则破坏语义边界。
- 把子组件硬塞成父组件的 Element：比如
document-listing__item，但DocumentItem其实跨页面复用，它本该是独立 Block —— 此时应为document-item - 滥用连缀修饰符：
button--primary--large--disabled是反模式；正确写法是button--primary button--large button--disabled，每个可单独开关、可被主题系统接管 - SCSS 中误用
&嵌套出非 BEM 结构：.button { &__icon { ... } &--large { ... } }看似方便，但编译后.button__icon失去上下文约束，一旦被其他项目引入就可能命中非预期元素
真正难的不是记住双下划线和双横线，而是每次写类名前，停下来问一句：这个东西，脱离当前组件还能不能独立存在？如果能，它就是 Block；如果不能，它才可能是 Element —— 这个判断比语法本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
