<p>必须用@projectwallace/postcss-bem-linter fork版本，因原版已归档，不支持嵌套规则、SCSS变量及.block__elem--mod语义层级；fork修复了这些问题，并要求在CSS顶部显式声明/ postcss-bem-linter: define .block /，否则所有BEM类均被误判为游离元素。</p>
postcss-bem-linter 为什么必须用 fork 版本？
原版 postcss-bem-linter 已归档，对嵌套规则、SCSS 变量支持弱，且无法识别 .block__elem--mod 中的语义层级。真正可用的是活跃维护的 fork：@projectwallace/postcss-bem-linter，它修复了嵌套解析、变量内联、作用域推断等问题。
装错包会导致校验完全失效——比如 npm install postcss-bem-linter 后发现 .header__logo 报“element not under block”，八成是用了停更版本。
校验前必须加顶部注释声明 block
插件不自动推断 block 名，.header__logo 不会因为类名含 header 就被识别为 .header 的子元素。它只认显式指令：
/* postcss-bem-linter: define .header */
立即学习“前端免费学习笔记（深入）”；
这个注释必须出现在 CSS 文件最顶部（或至少在首个 BEM 类之前），否则所有 __ 和 -- 都会被当作孤立命名报错。
- 多个 block 共存？拆文件，或每个文件顶部单独声明
define .card、define .modal - 用了 SCSS 嵌套？
&__title编译后是.list__title，但插件运行在 PostCSS 层，仍需顶部注释define .list - 动态拼接类名如
class="header__${state}"？静态分析不到，必须加入ignore列表
ignore 配置不写就误报一堆 js- / is- 类
默认模式下，.js-toggle、.is-open、.has-dropdown 全被当成非法 BEM 命名。必须主动跳过：
在 postcss.config.js 中传入：
{ preset: 'bem', ignore: [/^js-/, /^is-/, /^has-/] }
- 正则要带
^，否则.button-is-active也会被误放过 - 项目若用
.u-hidden（utility 类），也得加进ignore - 没配
ignore是新人踩坑最高频原因——不是规则错了，是根本没告诉插件哪些类“不算 BEM”
Vite 或 Webpack 里插件根本没跑？检查 CSS 是否走 PostCSS
Vite 默认对 .css 文件走 esbuild，绕过 PostCSS；Webpack 若没配 postcss-loader 或 loader 顺序错，插件也不会执行。
关键检查点：
- Vite：确认
vite.config.ts中css.postcss已启用，且插件在plugins数组里 - Webpack：确保
postcss-loader在css-loader之前，且postcss.config.js路径正确 - 写完配置后，故意写个错命名（如
.header__logo__icon），看构建是否报错——不报就是链路断了
真正难的不是写对规则，而是让每个 define 注释对应真实组件边界，且团队所有人知道：没注释 = 不校验，没 ignore = 大量误报，没走 PostCSS = 形同虚设。
