本文介绍如何在 emmet 中启用 bem 模式，通过简洁语法（如 `.parent__child` 或 `.parent__item--mod`）自动生成符合 scss 嵌套规范的 html 类名结构，大幅提升组件化开发效率。
Emmet 原生支持 BEM（Block–Element–Modifier）语义化类名生成，无需手动编写复杂正则片段或自定义 snippet。其核心机制是：当你输入类似 .card__header--large 的缩写时，Emmet 会自动解析 card 为 block、__header 为 element、--large 为 modifier，并生成带完整类名的 HTML 元素（如
），完美匹配 SCSS 中 @use "sass:selector" 或嵌套规则（.card { &__header { &--large { ... } } }）的开发习惯。✅ 启用方式（以主流编辑器为例）：
-
VS Code：打开设置（Ctrl+,），搜索 emmet.bem，勾选 Enable BEM support；或在 settings.json 中添加：
"emmet.bem": true
- WebStorm / IntelliJ：进入 Settings → Editor → Emmet → HTML，勾选 Enable BEM actions。
-
Sublime Text（Emmet 插件）：需在 Preferences → Package Settings → Emmet → Settings 中添加：
{ "bem": true }
? 典型用法示例：
| 输入缩写 | 生成 HTML | 对应 SCSS 语义 |
|----------|-----------|----------------|
| .btn |
⚠️ 注意事项：
- BEM 模式**仅作用于 class 缩写（. 开头），不支持 ID（#）或标签名前缀；
- 若父级 block 名含连字符（如 .user-profile），子元素仍正确解析为 .user-profile__avatar，无需额外转义；
- 禁用 bem 后，.btn__text 将被当作普通类名（即 ），不再自动补全 block 类——因此务必确认配置已生效；
- 当前 Emmet（v2+）已移除旧版 bem 过滤器（如 |bem），全部逻辑内置于核心解析器，无需在缩写末尾追加过滤器。
? 进阶提示：结合 Emmet 的 tabstops 与 BEM，可进一步提升效率。例如定义自定义缩写：
立即学习“前端免费学习笔记（深入）”；
"html": {
"snippets": {
"bem-block": "<div class=\"$1$1__${2:element}$3\">$0</div>"
}
}再配合 BEM 模式，即可快速构建多层嵌套结构，避免重复输入 block 名。
总之，启用 Emmet BEM 模式是 SCSS/BEM 工程中不可或缺的提效实践——它将语义意图直接映射为 HTML 输出，让开发者专注结构设计，而非类名拼写。
