scoped 与 bem 不互斥，但 scoped 不自动实现 bem；bem 的语义、层级和命名必须手动编写，scoped 仅通过 data-v-xxx 属性隔离作用域，不校验或生成类名。
直接说结论：scoped 和 BEM 不是互斥关系，但不能靠 scoped 自动实现 BEM；BEM 的语义、层级和命名规则必须手动写，scoped 只负责加 data-v-xxx 隔离作用域。
BEM 类名在 <style scoped></style> 里会正常工作吗？
会，但仅限于「选择器匹配」层面。比如你写了：
<style scoped>
.product-card { color: #333; }
.product-card__title { font-size: 1.2rem; }
.product-card--lg { padding: 1rem; }
</style>
Vue 编译后会变成类似：
.product-card[data-v-f3f2e1c4] { color: #333; }
.product-card__title[data-v-f3f2e1c4] { font-size: 1.2rem; }
.product-card--lg[data-v-f3f2e1c4] { padding: 1rem; }
所以类名本身没被破坏，BEM 结构完整保留——前提是：你得自己写对，不能拼错 __ 或 --，也不能漏掉 block 前缀。
常见错误现象：
- 写成
.card__title却期望它匹配<div class="product-card"> <h3 class="card__title"> —— block 名不一致，BEM 失效 </h3> <li>用 <code>:deep(.product-card__title)穿透子组件，但子组件没暴露该类名，或用了scoped自己又隔离了一层 - 在 Teleport 到
body的弹窗里继续用scoped+ BEM，结果样式不生效（因为 DOM 已脱离原组件作用域） -
scoped让.btn不影响其他组件的.btn，但它不管这个.btn是不是按钮、有没有状态变体 - BEM 强制你写
button（block）、button__icon（element）、button--primary（modifier），让类名自带上下文 - 没有 BEM，
scoped下照样可能写出.red、.big这种无法维护的类名 - 用
computed或useBemHook 生成类名数组，避免硬编码字符串，例如：bem.value = ['product-card', 'product-card--lg', 'product-card__title'] - Block 名统一定义在组件顶层常量里，如
const BLOCK = 'product-card'，后续所有__/--都基于它拼接 - 禁止在
scoped样式里写嵌套选择器（如.product-card .product-card__title），这会破坏 BEM 的扁平原则，也容易因data-v-xxx注入位置导致权重异常 - 对需要跨组件复用的 BEM block（如
modal、tooltip），改用全局 CSS 文件 +definePageMeta或app.vue注入，而不是依赖scoped生成唯一 ID
为什么 <style scoped></style> 不能替代 BEM 约定？
scoped 解决的是「样式作用域」问题，BEM 解决的是「类名语义与可维护性」问题。两者目标不同：
Vue 的 <style scoped></style> 本质是 PostCSS 插件做的属性选择器注入，它不分析、不校验、不生成任何类名——所有 BEM 规则都靠人手写、靠团队约定、靠 Code Review 保障。
如何在 Nuxt 3 中让 BEM + scoped 更可靠？
核心是把 BEM 的「结构约束」从人工记忆转为代码可读、DevTools 可追踪：
最易被忽略的一点：BEM 的 block 必须真正「独立可识别」。比如两个不同路径下的 ProductCard.vue，如果都用 product-card 作 block 名，那它们共享同一套样式逻辑——这反而是优势，不是 bug；但如果误写成 product-card-1 和 product-card-2，就违背了 BEM 的初衷。
