必须用 stylelint-selector-bem-pattern 插件，因 selector-class-pattern 仅字符串匹配，无法识别 bem 层级错误（如非法三级嵌套、驼峰命名、缺失 block 定义等）；其三项参数 preset、componentname、ignoreselectors 缺一不可，且需 vs code 正确配置 stylelint 扩展与验证语言。
必须用 stylelint-selector-bem-pattern 插件，仅靠 selector-class-pattern 正则匹配会漏掉语义错误，比如 .card__footer 写成 .card-footer 或 .userList 都能过检。
为什么 selector-class-pattern 不够用
它只做字符串比对，不理解 BEM 的层级关系。例如：
-
.card__header--large和.card-header--large在同一正则下可能都通过 -
.card__image__icon（非法三级嵌套）不会被拒绝 -
.Card__title（大写 Block）或.card__UserAvatar（元素名驼峰）默认不报错，除非额外配camelCase检查 - 完全无法验证
.card__footer是否真有对应.card块定义
如何正确配置 stylelint-selector-bem-pattern
三项参数缺一不可，少一个就等于没开规则：
-
"preset": "bem"：必须显式指定，不能省略或写成"suit" -
"componentName": "[a-z][a-z0-9]*"：强制 block 小写、无破折号，排除.UserCard和.user-card -
"ignoreSelectors": ["/^\.js-.+$/", "/^\..+:(hover|focus|active)$/"]：跳过 JS 钩子类和伪类，否则.button:hover直接报错
示例配置片段（.stylelintrc.cjs）：
module.exports = {
plugins: ['stylelint-selector-bem-pattern'],
rules: {
'plugin/selector-bem-pattern': {
preset: 'bem',
componentName: '[a-z][a-z0-9]*',
ignoreSelectors: [
'/^\.js-.+$/',
'/^\..+:(hover|focus|active|disabled)$/'
]
}
}
};
VS Code 里没报错？先查这三件事
装了插件但编辑器不标红，大概率卡在这几个环节：
- VS Code 没启用 Stylelint 扩展，或
"stylelint.enable"设为false -
"stylelint.validate"未包含"scss"（如果你用 SCSS），导致.block__elem在Button.module.scss里静默放过 - 其他插件（如 CSS Peek）抢了
Ctrl+Click跳转逻辑，间接干扰 Stylelint 的语法树解析
验证方式：在 CSS 文件里手写 .button__icon--large--v2，应立刻提示 “Modifier must not contain double hyphens”。
JS 动态拼的类名永远逃过 CSS 层检测
stylelint-selector-bem-pattern 只扫 CSS 文件里的选择器，对以下写法完全无感：
-
:class="['card', `card--${status}`]"（缺__，但不报错） -
className={`btn__icon ${loading ? 'btn__icon--loading' : ''}`（空格错位、修饰符归属断裂都不拦截）
真正能卡住的只有两件事：一是封装 BEM 工厂函数（如 cn('icon', 'loading')），二是用 ESLint + html-validate 在 HTML/JSX 层补第二道校验，检查 class 属性值是否符合正则 ^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
