postcss-bem是纯文本拼接器，非智能识别工具；必须显式配置完整类选择器（如'.card'）作为scope，且须置于postcss-nested之后，仅处理独立出现的.__xxx或._xxx形式。
postcss-bem 不是“自动识别类名并加前缀”的工具，它只做纯文本拼接，且必须显式配置 scope 才生效。
postcss-bem 的 scope 配置必须写全选择器
它不接受 card 或 card__header 这类片段，只认完整、带点的类选择器，比如 '.card'。漏掉点号、多加空格、写成 'card ' 都会导致插件完全静默——不报错，也不补全。
- 正确写法：
scope: '.card'（注意单引号和点号） - 错误写法：
scope: 'card'、scope: '.card '、scope: '.card__title' - 多个块需分别配置：不能用一个插件实例处理
.card和.button，得用两次postcss-bem或改用数组传入多个 scope（部分版本支持）
postcss-bem 必须放在 postcss-nested 之后
如果你用 &__title 这种嵌套写法，postcss-bem 看不到原始结构——它只处理已展开的选择器。如果顺序反了，插件拿到的是 .card &__title，根本匹配不到 .__title 模式。
- 正确顺序：
postcss-nested→postcss-bem - 它只响应独立出现的
.__xxx或._xxx（后者需配modifier: '_'） -
.card .__title有效；.card { &__title { } }无效——前者是 postcss-nested 展开后的结果，后者是源码
分隔符 separator 改动后必须同步调整写法
默认 separators: { element: '__', modifier: '--' }，但你若改成 element: '-'，就得把 .__title 改成 .-title，否则插件直接跳过。这不是智能推断，是字符串字面匹配。
- 常见坑：
modifier: '--'时写._active，或modifier: '_'时写.--hover，全都不生效 - 伪类不算修饰符：
.button:hover被转成.button__hover是错的，BEM 里:hover应保留原样，不参与前缀拼接 - 校验类名是否合法？靠
@projectwallace/postcss-bem-linter，不是postcss-bem本身
真正容易被忽略的，是 scope 的作用域边界——它只影响当前 CSS 文件内显式写出的 .__xxx，对 HTML 中实际使用的类名、JS 动态拼接的 class、甚至其他 CSS 文件里的同名 block 都无感知。补全只是编译时的一次字符串操作，别指望它帮你发现遗漏的 card__footer 是否在模板里漏写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
