bem + scoped 需命名意图与作用域边界双保险：block 名须严格对齐组件文件名（如 usercard.vue → user-card），element 用__连接、modifier 用--连接且不得脱离 block，动态类名须静态声明，穿透样式须限定于 bem 容器内。
BEM + scoped 不是“加个前缀就完事”，而是靠命名意图和作用域边界双保险——没按组件名定 Block，或滥用 ::v-deep 穿透，反而会让样式更难维护。
Block 名必须与组件文件名严格对齐
Vue 组件的 Block 名不是随便起的，它直接决定整个 BEM 结构的语义锚点。比如 UserCard.vue 对应的 Block 必须是 user-card，不能简写成 card 或驼峰式 userCard。
- 错误示例：
<div class="card"> → 无法识别归属，多人协作时极易重复定义 <li>正确写法：<code><div class="user-card">，所有子元素类名都以此为前缀 <li>SCSS 中用 <code>&嵌套可自动补全前缀：.user-card { &__avatar { width: 40px; } &--compact { padding: 8px; } } - 如果组件名含数字或大写字母（如
PDFViewer.vue），统一转为小写+短横线：pdf-viewer
Element 和 Modifier 必须依附于 Block 存在
BEM 的 __element 和 --modifier 是强依赖结构，脱离 Block 单独使用会破坏语义隔离，也容易让 scoped 失效。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章