必须使用@projectwallace/postcss-bem-linter，原版已归档失效；每个CSS文件顶部须加/ postcss-bem-linter: define .block /显式声明，且需在postcss.config.js中配置ignore正则（如/^js-/）以避免误报，Vite/Webpack还需确保PostCSS链路正确启用。
必须用 @projectwallace/postcss-bem-linter，原版已失效
npm install postcss-bem-linter 安装的是归档版本，对嵌套规则、SCSS变量、.block__elem--mod 语义层级完全不识别，校验形同虚设。真正可用的是活跃维护的 fork：@projectwallace/postcss-bem-linter。装错包会导致所有错误静默通过——比如写 .header__logo__icon 或 .card--hover--large 都不会报错。
每个 CSS 文件顶部必须加 define 注释
插件不推断 block 名，.header__logo 不会因为含 header 就自动归属到 .header。它只认显式声明：
/* postcss-bem-linter: define .header */
这行必须出现在文件最顶部（或至少在首个 BEM 类之前），否则：
-
.header__logo报 “element not under block” -
.card__body--expanded中的--expanded被判非法 modifier - 即使 SCSS 编译后是
.list__title，也得在对应 CSS 文件顶部写define .list
ignore 配置漏掉就全是误报
默认模式下，.js-toggle、.is-open、.u-hidden 全被当违规命名。必须在 postcss.config.js 显式跳过：
{ preset: 'bem', ignore: [/^js-/, /^is-/, /^has-/, /^u-/] }
注意两点：
- 正则必须带
^，否则.button-is-active也会被误放过 - 项目若混用 utility 类（如
.u-text-center）、JS 钩子类（.js-modal-trigger）、状态类（.is-disabled），全得列进ignore
Vite/Webpack 里插件根本没跑？检查 CSS 是否走 PostCSS
Vite 默认对 .css 文件走 esbuild，绕过 PostCSS；Webpack 若没配 postcss-loader 或 loader 顺序错，插件也不会执行。
关键检查点：
- Vite：确认
vite.config.ts中css.postcss已启用，且@projectwallace/postcss-bem-linter在plugins数组里 - Webpack：确保
postcss-loader在css-loader之前，且postcss.config.js路径正确 - 写完配置后，故意写个错命名（如
.modal__close-btn），看构建是否报错——不报就是链路断了
真正难的不是写对规则，而是让每个 define 注释对应真实组件边界，且团队所有人清楚这个注释不是可选的“文档”，而是校验开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
