选 @projectwallace/postcss-bem-linter，它专为 BEM 设计，支持嵌套和 SCSS 变量；需在 CSS 顶部用 / postcss-bem-linter: define .block / 显式声明 block，并配置 ignore 跳过 js-/is- 类，同时确保构建工具中 PostCSS 正确介入。
PostCSS插件选哪个能真正校验BEM命名？
直接用 postcss-bem-linter，它专为 BEM 设计，不是通用 CSS 校验器。其他如 stylelint 虽可配规则，但需手动写正则、维护成本高，且默认不理解 block__element--modifier 的语义层级。
注意：postcss-bem-linter 已归档，但仍在 actively maintained 的 fork 版本 @projectwallace/postcss-bem-linter 可用（npm 上可装），原版对嵌套、SCSS 变量支持弱，fork 版修复了这些。
怎么配置才能让校验不误报？
BEM 不是死规则，postcss-bem-linter 允许你声明 block 名称白名单和命名风格，否则它会把所有类名都按默认模式 ^[a-z][a-zA-Z0-9]+(__[a-z][a-zA-Z0-9]+)?(--[a-z][a-zA-Z0-9]+)?$ 匹配，导致 .js-toggle 或 .is-open 这类 JS 钩子或状态类被报错。
推荐配置方式：
立即学习“前端免费学习笔记（深入）”；
- 在
postcss.config.js中启用插件，并传入{ preset: 'bem' }（启用经典 BEM 模式） - 用
ignore选项跳过非 BEM 类：例如ignore: [/^js-/, /^is-/, /^has-/] - 若项目用
block-name__elem-name--mod-name风格，确保 CSS 文件顶部有注释/* postcss-bem-linter: define .my-block */，否则插件无法推断 block 上下文
为什么写了 __ 还报“element not under block”？
这是最常见误报，本质是插件依赖「作用域声明」。它不会自动从文件路径或父选择器推断 block，必须显式定义。
比如你在 header.css 里写：
.header__logo { ... }
.header__nav { ... }但没加 /* postcss-bem-linter: define .header */，插件就会认为 .header__logo 是孤立的 element，没有归属 block —— 它不解析类名前缀，只认注释指令。
其他触发条件：
- 使用嵌套语法（如 SCSS）时，
&__item在编译后可能变成.list__item，但插件运行在 PostCSS 层，看不到&，仍需顶部注释定义.list - 动态拼接类名（
class="header__${state}"）无法被静态分析，这类应加入ignore
和 Webpack / Vite 集成时容易漏掉什么？
校验只发生在 PostCSS 处理阶段，如果 CSS 没走 PostCSS 流程（比如 Vite 默认对 .css 直接走 esbuild，绕过 PostCSS），插件根本不会执行。
关键检查点：
- Vite 项目：确认
vite.config.ts中启用了css.postcss.plugins，且postcss-bem-linter在数组里靠前（不能在cssnano之后，否则被压缩后类名变形） - Webpack +
css-loader：确保postcss-loader配置中包含该插件，且sourceMap: true开启，否则报错位置指向压缩后代码 - CI 环境：插件默认只在开发构建中 warn，生产环境静默。如需 CI 失败，得加
onError: (msg) => { throw new Error(msg) }
BEM 校验真正的难点不在规则本身，而在于 block 边界的显式声明和构建流程中 PostCSS 的实际介入时机——这两处一漏，就只剩报错和困惑。
