必须用stylelint-selector-bem-pattern插件并配齐preset、componentname、ignoreselectors三项参数，否则.selector-class-pattern仅正则匹配，无法识别.card__header__logo等非法三级嵌套、.card__title块名大写、.card-footer连字符误用等语义错误。
必须用 stylelint-selector-bem-pattern 插件，仅靠 selector-class-pattern 正则匹配会漏掉语义错误——比如 .card__header__logo（非法三级嵌套）、.Card__title（块名大写）、.card-footer（连字符误用）全都能过检。
为什么不能只配 selector-class-pattern
它只做字符串比对，不理解 BEM 的层级逻辑：
• .card__image__icon 和 .card__image--large 在同一正则下可能都通过
• .userList 若没禁驼峰，会被当成合法小写开头+字母数字组合
• 完全无法验证 .card__footer 是否真有对应 .card 块定义
• 不拦 .button-primary 这类 SUIT 风格写法，等于校验形同虚设
stylelint-selector-bem-pattern 必须配齐三项参数
少一个就等于没开规则：
• preset: "bem"：显式启用 BEM 模式，不能省略或写成 "suit"
• componentName: "[a-z][a-z0-9]*"：强制块名小写、无破折号，排除 .UserCard 和 .user-card
• ignoreSelectors: ["/^\.js-.+$/", "/^\..+:(hover|focus|active|disabled)$/"]：跳过 JS 钩子类和伪类，否则 .button:hover 直接报错
PostCSS 插件 @projectwallace/postcss-bem-linter 的适用边界
它适合已跑 PostCSS 构建链的项目，但有硬性前提：
• 必须在 CSS 文件顶部加注释 /* postcss-bem-linter: define .block */，否则所有 __ 和 -- 都被当游离命名
• 装错包（如只装 postcss-bem-linter）会导致静默失效，连 .header__logo__icon 都不报
• 动态类名（如 class="card__${state}"）静态分析不到，必须进 ignore 列表
• Vite 默认用 esbuild 处理 .css，需手动确认 css.postcss 已启用
真正容易被忽略的是：BEM 校验的有效性不取决于工具多强大，而在于每条规则是否对应真实组件边界——define .card 写在文件顶部，但实际 HTML 里用了 class="c-card"，样式照样断连。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
