stylelint 默认不校验 bem 命名，因内置规则如 selector-class-pattern 仅支持通用正则匹配，无法解析 block__element--modifier 三层语义；必须安装 stylelint-selector-bem-pattern 插件并严格配置 preset、componentname 和 ignoreselectors 三项参数，否则 .btn-primary 等非bem写法将零报错。
Stylelint 本身不提供 BEM 命名的默认校验能力，selector-bem-pattern 规则必须通过插件 stylelint-selector-bem-pattern 显式启用，且正则配置稍有偏差就会让 .btn-primary 这类非BEM写法畅通无阻。
为什么默认 stylelint 配置对 BEM 完全无效
stylelint-config-standard 或 stylelint-config-recommended 都不包含 BEM 检查逻辑。它们只管属性拼写、缩进、引号等基础语法，对类名结构完全放行。
-
selector-class-pattern是内置规则，但它是通用正则匹配，不能理解 BEM 的三层语义（block__element--modifier） -
plugin/selector-bem-pattern才是专为 BEM 设计的规则，它能区分.card__image和.card-image的语义差异 - 不装插件、不配规则，CI 流程里跑
stylelint就等于没开检查——.userList、.modal-close-btn全部零报错
必须手动配置的三项关键参数
仅声明插件和规则还不够，下面三个字段缺一不可，否则规则形同虚设：
-
"preset": "bem"：启用 BEM 模式（不是"suit"或"css-modules"） -
"componentName": "[a-z][a-zA-Z0-9]*"：定义块名必须小写开头、不含下划线或破折号（排除.Card、.user-list） -
"ignoreSelectors"：显式排除伪类，否则.button:hover会被误判为违规；推荐值为["/^..+:(hover|focus|active|disabled|visited)$/"]
错误示例配置："componentName": "[A-Z]+" 会允许 .Button，直接违背 BEM 小写约定。
常见 false positive 场景与绕过方式
校验太严格反而阻碍开发，以下情况需主动豁免，而非关规则：
- 第三方组件库的类名（如
.ant-btn）：在ignoreSelectors中加"/^\.ant-.+$/" - Utility-first 类（如
.text-center）：单独用"utilitySelectors"字段定义白名单正则，避免和 BEM 规则冲突 - Vue 单文件组件中动态绑定的类：
:class="['card', `card--${status}`]"→ 确保 JS 侧也用工具函数生成，别手拼字符串
注意：/* stylelint-disable */ 注释只能临时跳过整条规则，应尽量用 ignoreSelectors 统一管理例外。
自动修复能力非常有限，别依赖 --fix
stylelint --fix 对 BEM 类名命名问题基本无能为力。它无法把 .userList 改成 .user-list，更不能补全缺失的 __ 或 --。
- 目前没有稳定可靠的 PostCSS 插件能做语义级重命名（
postcss-bem已多年未维护，且会错误扩写__icon成__icon__icon） - 真正能落地的“自动化”是：编辑器实时提示（VS Code + PostCSS Language Support）、保存时校验、CI 失败阻断提交
- 最易被忽略的一点：BEM 规则生效的前提是所有类名都通过
className属性静态写死或由cn()函数生成——JS 拼接字符串会逃逸校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
