必须用BEM与scoped协作：scoped管作用域隔离，BEM管命名语义与归属；Block名须严格对齐文件名（如UserCard.vue→user-card），动态类名需完整前缀，穿透第三方组件须用BEM容器限定范围。
有必要，而且必须用——scoped只管“作用域不越界”，BEM 管“类名不糊弄”。光靠 scoped 会纵容你写 .header、.btn、.list 这种泛化类名，编译后虽然带了 data-v-xxx 属性，但语义早已坍塌，协作和维护成本反而更高。
为什么 scoped 不能替代 BEM
scoped 的原理是给元素加属性、给选择器加属性匹配，它完全不检查你写的类名有没有意义。你写 .item 或 .wrapper，它照常编译；你在十个组件里都写 .content，它也各自隔离得“挺好”——但 DevTools 里一搜全是 content，根本分不清谁是谁。
-
scoped防污染，但不管命名质量；BEM 强制你把归属（user-card__content）和角色（__content）写进名字里 - 没有 BEM 的
scoped组件，就像没装门牌号的公寓楼：每户都上了锁（作用域安全），但快递员根本找不到 302 室在哪 - 一旦需要抽离组件复用，或对接设计系统，缺失 Block 上下文的类名（比如只有
__title）会直接导致样式断链
Block 名必须和文件名严格对齐
Vue 组件 UserCard.vue → Block 名只能是 user-card，不是 card、user__card、UserCard，也不是 user-card-component。这是硬性映射，不是风格偏好。
- 模板中所有类名必须以
user-card开头：user-card__avatar✅，__avatar❌，avatar❌ - SCSS 中用
&嵌套可防手误：.user-card { &__header { } &--compact &__header { } } - 写错 Block 名（比如拼成
user-crad）不会报错，但会导致动态类名（如:class="baseClass + '--compact'"）生成的样式无法命中
穿透第三方组件时，::v-deep 必须绑定 BEM 容器
在 <style scoped></style> 里直接写 ::v-deep(.el-button) 是无效的——el-button 元素本身没有 data-v-xxx 属性，而 ::v-deep 又不自动继承外层作用域。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：模板中用 BEM 容器包裹目标组件，例如
<div class="user-card__action"><el-button>编辑</el-button></div> - 样式中限定穿透范围：
.user-card__action ::v-deep(.el-button) { height: 32px; } - 漏掉外层容器，等于把
::v-deep当成全局开关，后续删改时极易误伤其他页面的同名组件
动态类名必须完整声明前缀
v-bind:class 拼接的字符串，如果漏写 Block 前缀，scoped 不会帮你补全。例如 :class="['user-card__item', isHover && 'user-card__item--hover']" 是安全的；但写成 isHover && '__item--hover' 就失效。
- 修饰符（
--compact）不能脱离 Block 单独存在，user-card--compact✅，--compact❌ - Element 名也不能省略双下划线：
user-card__avatar✅，user-card-avatar❌（这不是 BEM，是自创命名） - SCSS 编译时若嵌套出
.user-card--compact__header，说明用了错误写法&--compact { &__header { } }，应改为&--compact &__header { }
BEM 和 scoped 的交界处最易出问题：不是语法报错，而是运行时样式不生效、DevTools 里找不到匹配项、改一处牵动八方。这些坑往往出现在类名拼写、嵌套层级、穿透范围这三处，且很难被 ESLint 或 Vue Devtools 主动提示。
