PostCSS 无法自动处理 BEM 风格，真正起作用的是需手动配置的插件：postcss-bem 仅字符串拼接前缀且 scope 必填；stylelint-selector-bem-pattern 负责校验但需 preset、componentName、ignoreSelectors 三参数齐全；PostCSS Language Support 仅提供静态类名高亮反馈。
不能靠PostCSS“自动处理”BEM风格——它不生成、不校验、不修复，只做字符串拼接；真正起作用的是插件，且必须手动配对、严格约束上下文。
postcss-bem 只负责补全前缀，但 scope 必须显式声明
它不是智能推导器，不会猜你当前在写哪个组件。比如想让 .__header 变成 .card__header，就得提前告诉它根块名是什么：
-
scope是必填项，漏掉就完全不生效，哪怕写了.__title也会原样输出 - 配置里写
scope: '.card'，它才处理.card .__title→.card .card__title，但.card__title已经完整，就不会动 - 不支持文件级自动 infer：不能根据文件名
card.css自动设scope: '.card'，每个文件都得手配 - 若用嵌套语法（如
.card { &__title { } }），必须确保postcss-nested在postcss-bem之前执行，否则它看到的是未展开的&__title，无法识别
stylelint-selector-bem-pattern 才是真·校验主力
它不改代码，但能立刻标红非法命名，比如 .card-footer 或 .button__icon--large--v2。关键点不在装插件，而在三项参数一个都不能少：
-
preset: 'bem'必须显式写，写成'suit'或漏掉，规则直接不加载 -
componentName要定义 block 命名模式，比如[a-z][a-zA-Z0-9]+，否则.BtnPrimary这种 PascalCase 不报错 -
ignoreSelectors得排除 JS 控制类（/^\.js-/）和伪类（/^\..+:(hover|focus)$/），否则大量误报 - 它默认不认
.card__title__sub或.card .title，但也不会告诉你为什么——只报 “Expected BEM selector”，需结合文档看 preset 行为
别信“自动修复”或“智能补全”类宣传
目前没有 PostCSS 插件能安全地把 .userList 改成 .user-list__item，也没有插件能根据 HTML 结构反推该加什么 modifier。所有所谓“自动”都依赖边界清晰的输入：
立即学习“前端免费学习笔记（深入）”；
-
postcss-bem的补全是纯字符串替换：遇到.__icon就拼前缀，不管上下文是否合理，.modal .__icon会变.modal .modal__icon，但 modal 未必有这个 element - 编辑器里的 BEM Snippets 或 BEM Helper 插件，只补全文本，不校验语义，甚至会推荐
.card__content__title这种违反 BEM 扁平原则的写法 - VS Code 的 IntelliSense 补全只按前缀触发：
card__→ 列出所有card__*类；但card开头不触发，除非你开了editor.suggest.showClasses并且项目里真有.card这个 block
PostCSS Language Support 是唯一靠谱的视觉反馈
它不报错、不补全、不 lint，但能把 .card__header--dark 当作合法标识符高亮，而 .card_header--dark 或 .card__header-dark 会灰显——这是最轻量也最可靠的实时信号。
但它有硬限制：
- 只识别 CSS/SCSS/Less 文件中的静态类名，
&__title这类预处理器语法不解析 - Vue 模板中
class="card__body"可高亮，但:class="['card', base + '__body']"完全失效 - 不检查
.card__footer是否在 HTML 中真实存在，也不管 block 名是否拼错（.carrd__header依然高亮）
真正容易被忽略的是：工具链必须闭环——postcss-bem 配了但没配 stylelint-selector-bem-pattern，等于只放行不把关；反过来只开 lint 却不用 postcss-bem，手敲前缀仍会疲劳出错。BEM 的自动化，从来不是选一个插件就完事。
