BEM与scoped分工协作：BEM管命名归属与语义，scoped管作用域边界；Block名须严格对齐组件文件名（如UserCard.vue→user-card），动态类名需静态声明，穿透样式须限定在BEM容器内。
需要。Scoped CSS 只解决样式不外溢，BEM 解决类名归属混乱——两者职能不同，缺一不可。
Scoped 不会帮你管类名语义
Vue 的 scoped 会给选择器加 data-v-xxx 属性，比如 .btn 编译成 .btn[data-v-f3f2e1c4]，但它完全不管你是写 .btn、.header 还是 .item。这些泛化类名在组件内依然可能：
• 被多个开发者重复定义
• 在父子嵌套时难以定位来源
• 导致 class="item" 到底属于哪个模块，谁也说不清
Block 名必须和组件文件名严格对齐
这是最容易被跳过的硬规则，但直接决定 BEM 是否生效：
• UserCard.vue → Block 名只能是 user-card，不是 card 或 userCard
• PDFViewer.vue → 必须转为 pdf-viewer（全小写 + 短横线）
• 模板里所有类名必须以 user-card 或 pdf-viewer 开头，禁止出现孤立的 __header 或 avatar
• 错误示例：<div class="__header"> → 编译后变成 __header[data-v-xxx]，但模板里根本没这个类，样式失效
SCSS 嵌套容易产出非法 BEM 选择器
用 & 嵌套时，稍不注意就违反 BEM 规则：
• 错误写法：.user-card { &--compact { &__header { } } } → 编译出 .user-card--compact__header，修饰符不能直接修饰元素
• 正确写法：.user-card { &--compact { &__header { } } } 应改为 .user-card { &--compact &__header { } }，编译后是 .user-card--compact .user-card__header
• Element 必须用双下划线：user-card__avatar ✅，user-card-avatar ❌（易被当成独立 Block）
• Modifier 只叠加状态变更：user-card--disabled 可改 opacity 和 cursor，但不该动 border-radius
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
动态类名和穿透样式必须按 BEM 容器限定
这两处最容易让 scoped 失效：
• 动态类名必须静态声明：:class="['user-card', { 'user-card--highlighted': isHighlighted }]" ✅，不能写 :class="'user-card--' + variant" ❌（scoped 无法识别并注入属性）
• 穿透子组件时，禁止直接 :deep(.el-button) → 影响全局；应限定在 Block 容器内：:deep(.user-card__submit-btn .el-button)
• 更稳妥做法：在第三方组件上显式加 BEM 类，如 <el-button class="user-card__submit-btn">，然后只写 .user-card__submit-btn 即可
BEM 和 scoped 的协作边界很清晰：一个管“这是谁的”，一个管“只影响谁”。一旦 Block 名不对齐、动态类名没声明、穿透没容器，三处任一翻车，整个隔离体系就松动了。
