本文详解如何在现代 emmet（v2+）中启用 bem 模式，实现类似 `.parent__child` 输入自动生成带父级前缀的 html 类名（如 `class="parent__child"`），大幅提升 scss 嵌套开发效率。
Emmet 原生支持 BEM（Block–Element–Modifier）语法，但不依赖自定义正则片段（如问题中尝试的 & snippet），而是通过内置的 bem 处理器统一解析。该功能专为 SCSS/CSS-in-JS 等嵌套式样式工作流设计，可自动识别当前作用域的“父块”（block），并基于 __（元素）、--（修饰符）语法智能补全类名。
✅ 正确启用方式（以主流编辑器为例）
BEM 模式需显式开启，且配置位置因编辑器而异：
-
VS Code：
在 settings.json 中添加："emerald.emmet.bem": true
⚠️ 注意：VS Code 内置 Emmet 已默认启用 BEM（v1.90+），但若失效，请确认已安装最新版或检查是否被其他插件覆盖。
WebStorm / IntelliJ：
Settings → Editor → Emmet → HTML → Enable BEM actions ✔️ 勾选即可。-
Sublime Text（Emmet 插件）：
编辑 Preferences → Package Settings → Emmet → Settings，添加：{ "bem": true }
✅ 实际使用效果
启用后，在 HTML 文件中直接输入以下缩写，即可获得符合 BEM 规范的结构：
.parent>div.child__item+div.child__action
→ 展开为：
<div class="parent"> <div class="parent__item"></div> <div class="parent__action"></div> </div>
更简洁地，单独输入：
.parent__header
→ 自动创建
，无需手动重复书写 parent。⚠️ 关键注意事项
- 作用域依赖：BEM 解析基于光标所在上下文。若光标位于 .card 元素内部，后续输入 .__title 将生成 class="card__title"；若在文档顶层，则无法推断 block，需显式声明（如 .card__title）。
- 不兼容旧版 snippet 逻辑：问题中尝试的正则片段（如 & 触发）属于早期 Emmet v1 的 hack 方式，在 v2+ 中已被废弃，且存在匹配不稳定、无法处理嵌套层级等问题，强烈建议弃用。
-
SCSS 友好性：生成的类名可直接对应 SCSS 嵌套规则：
.parent { &__child { /* ... */ } &--active { /* ... */ } }
? 进阶提示：结合 tabstops 提升效率
在 BEM 模式下，还可配合 Emmet 的 $1, $2 占位符快速编辑：
.parent>(div.$1__item{$2})*3展开后，第一个 $1 会高亮为可编辑 tabstop（如输入 menu），$2 作为内容占位符（如输入 Home），最终生成：
<div class="parent__item">Home</div> <div class="parent__item">Home</div> <div class="parent__item">Home</div>
综上，启用 Emmet 的 bem 选项是实现高效、可靠、语义化 BEM 类名生成的唯一推荐路径——它由官方维护、跨编辑器一致、深度适配 SCSS 工作流，远优于手工维护正则片段。立即启用，让 HTML 结构与样式层真正协同演进。
