必须用stylelint-selector-bem-pattern插件并配齐preset、componentName、ignoreSelectors三项参数，否则BEM违规静默通过；因selector-class-pattern仅字符串匹配，无法识别语义层级、大小写、分隔符错误及块定义缺失。
不能只靠 selector-class-pattern，必须用 stylelint-selector-bem-pattern 插件并配齐三项参数，否则所有 BEM 违规都会静默通过。
为什么 selector-class-pattern 根本拦不住 BEM 错误
它只做字符串正则匹配，完全不理解 BEM 的语义层级：
• .card__image__icon（非法三级嵌套）不会报错
• .Card__title（大写 Block）或 .card__UserAvatar（驼峰 Element）默认放过
• .card__footer 写成 .card-footer 也能通过，但违反双下划线约束
• 它也不校验 .card__footer 是否真有对应 .card 块定义
stylelint-selector-bem-pattern 必须配全的三项参数
少一个，规则就等于没开：
• "preset": "bem"：必须设为 "bem"，不是 "suit" 或 "css-modules"
• "componentName": "[a-z][a-z0-9]*"：强制 block 小写开头、无下划线/短横线，拦掉 .UserCard 和 .user-card
• "ignoreSelectors": ["/^\.js-.+$/", "/^\..+:(hover|focus|active|disabled)$/"]：跳过 JS 钩子类和伪类，否则 .button:hover 会被误标
CI 和编辑器里实际生效的关键动作
装插件 ≠ 能报错，链路断在哪，检查就停在哪：
• VS Code 要确认启用了官方 Stylelint 扩展（作者 Shinnosuke Watanabe），且 "stylelint.enable": true、"stylelint.validate": ["css","scss","vue"] 已配置
• CI 脚本别扫全量：npx stylelint "**/*.{css,scss,vue}" 会误扫 node_modules 和 dist/；应限定为 npx stylelint "src/**/*.{scss,vue}"
• Vue/Svelte 单文件组件中 <style> 块默认不进校验，需确保已启用 stylelint-config-standard-scss 并在配置中声明 processor: "stylelint-processor-html"
立即学习“前端免费学习笔记（深入）”；
--fix 对 BEM 命名基本无效，别依赖
Stylelint 的自动修复只覆盖纯格式类规则（如分号、缩进、引号大小写）：
• .userList 不会变成 .user-list__item
• .card-footer 不会补成 .card__footer
• 更不会同步改 HTML 模板或 JS 动态拼接的 class 字符串
真正要修的，是人——工具只负责高亮和阻断，别让它替你做语义决策。
