postcss插件不能自动修复bem类名，只能检测；postcss-bem仅做静态拼接（如&__icon→.block__icon），需显式配置scope且不解析语义；真正可靠的检测工具是stylelint-selector-bem-pattern和@projectwallace/postcss-bem-linter，二者均需显式声明上下文（配置项或顶部注释）才生效。
PostCSS 插件不能自动修复 BEM 类名，只能检测；所谓“修复”是常见误解，工具连 userList → user-list__item 这种基础转换都不可靠，更别说语义判断。
为什么 postcss-bem 不是修复工具
postcss-bem 只做静态拼接，不是命名生成器或重写器。它把 &__icon 替换成 .block__icon，前提是已配 scope: '.block'；它不分析类名含义、不读文件名、不推断上下文，更不会把 .btn-primary 改成 .button--primary。
常见误操作包括：
- 以为启用
postcss-bem就能“自动规范化”，结果只是把嵌套语法展开，没解决命名本身是否合规 - 搭配
postcss-nested时顺序错了（postcss-bem必须在它之后），导致看到的仍是&__icon，根本没拼接 - 写了
.card { &__title { } }却期望生成.card__title，但插件只处理独立出现的.__title，不解析 SCSS/Sass 嵌套语法
真正能检测的插件只有两个靠谱选择
检测 ≠ 修复，但必须选对插件才能稳定报错：
-
stylelint-selector-bem-pattern：编辑器里实时提示，不依赖构建流程，推荐作为第一道防线。需配preset: 'bem'和ignoreSelectors（如/^js-/），否则.js-dropdown会被误标为错误 -
@projectwallace/postcss-bem-linter（注意是 fork 版）：运行在 PostCSS 构建阶段，能拦截编译错误。原版已归档，不支持.block__elem--mod三层结构和 SCSS 变量内联，装错包就等于没装 - 二者都要求显式声明上下文：
stylelint靠配置项componentName，postcss-bem-linter靠 CSS 文件顶部注释/* postcss-bem-linter: define .block */；不写这句，所有带__的类都会被当成游离元素报错
Vite/webpack 中插件常静默失效的三个关键点
写了配置却没报错？大概率链路断了：
- Vite 对普通
.css文件默认走esbuild，必须在vite.config.ts中显式启用css.postcss.plugins，或确保项目根目录存在postcss.config.js并被识别 -
.module.css默认不进 PostCSS 流程，得手动配css.modules.locals并挂载插件链 - 插件顺序错：比如把
postcss-bem-linter放在postcss-bem之前，它检查的是未补全的选择器，.block__title还没生成，自然无从校验
最麻烦的不是插件配不配得上，而是每个 define .block 注释得对应真实组件边界——写错一个，整块 CSS 的 BEM 校验就失准；动态拼接类名（如 class="header__${state}"）永远逃逸在校验之外，只能靠人工加 ignore 正则兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
