postcss-bem插件是嵌套写法补全器，非语义重命名工具；它将&__icon展开为.block__icon，但需预先声明block上下文（如@define-block或顶部注释），否则不生效。
PostCSS 不能自动把 .userList 转成 user-list__item，也不该指望它做语义级重命名——这类转换必须人工判断，工具只负责格式校验和有限替换。
postcss-bem 插件到底能做什么？
它不是命名生成器，而是「嵌套写法补全器」：在 SCSS 或 PostCSS 嵌套语法中，把 &__icon 编译为 .block__icon，或把 &--active 展开为 .block--active。但前提是已声明 block 上下文（比如用 @define-block .card 或顶部注释）。
常见误用点：
- 直接对普通 CSS 文件启用插件，却没写任何 block 声明 → 插件无从推断作用域，什么都不会做
- 期望它把
.btn-primary改成button__primary→ 它不分析语义，只按预设模式匹配&__/&-- - 和
stylelint-selector-bem-pattern混用却不配置 ignore → 两者规则冲突，js-toggle类被反复报错
为什么写了 __ 还提示 “element not under block”？
因为 postcss-bem-linter（及其 fork 版本）不解析类名前缀，它只认显式指令。即使你写了 .header__logo，若没在文件顶部加 /* postcss-bem-linter: define .header */，插件就认为这个 element 是游离的。
其他触发条件：
- SCSS 编译后才生成
__，但插件运行在 PostCSS 层，看不到&—— 所以仍需顶部声明.list这类 block - Vite 默认对
.css文件走 esbuild，绕过 PostCSS → 插件根本没执行，得手动配css.postcss.plugins - 动态拼接类名如
class="header__${state}"→ 静态分析无法覆盖，必须加入ignore列表
如何配置 postcss-bem-linter 减少误报？
原版已归档，推荐用 @projectwallace/postcss-bem-linter，它修复了嵌套和 SCSS 变量支持问题。关键配置项：
- 在
postcss.config.js中传入{ preset: 'bem' }启用经典模式 - 用
ignore: [/^js-/, /^is-/, /^has-/]跳过 JS 钩子与状态类 - 每个 CSS 文件顶部加
/* postcss-bem-linter: define .block-name */，否则插件无法建立上下文 - 避免把 DOM 结构直接映射为 BEM 层级 ——
card__body__text不是好设计，text-block才是可复用的块
VS Code 和构建流程里最容易漏掉什么？
VS Code 装 PostCSS Language Support 插件能高亮 __/-- 语法，但不会阻止你写出 .userList__item 这种违反 BEM 的写法；真正起作用的是构建时的 linter。
容易被忽略的集成细节：
- Vite 项目中，
.module.css默认不走 PostCSS，得显式配css.modules.localsConvention并确保插件在css.postcss.plugins数组里 - Webpack 中若用了
css-loader的modules模式，需确认postcss-bem-linter在css-loader之前执行，否则 AST 已被破坏 - CI 流程里只跑 ESLint、忘了加
npx postcss src/**/*.css --no-map→ 校验形同虚设
BEM 的自动化边界很清晰：它能守住格式，守不住意图。那个该叫 search-input__clear 还是 icon-button--clear，得人来拍板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
