pre-commit钩子应仅校验暂存区css文件，需用git diff --cached提取变动文件、cd至仓库根目录、用正则兼容utility类和bem规范，并辅以html-validate和eslint校验jsx/html中的class名。
pre-commit钩子只校验暂存区CSS文件
直接跑 stylelint "**/*.css" 会扫全量文件，既慢又误报。真正该检查的只是 git add 进暂存区的那几个改动文件。
实操脚本必须包含三步：
- 用
git diff --cached --name-only --diff-filter=ACM提取本次提交新增/修改/重命名的文件 - 加
| grep '\.css$'过滤出 CSS 类型（注意单引号防 shell 展开） - 开头必须
cd $(git rev-parse --show-toplevel)切到仓库根，否则stylelint找不到配置文件
漏掉任一环，钩子要么不生效，要么报路径错误。尤其 cd 这步，本地开发常因工作目录在子文件夹而失败。
selector-class-pattern 正则要兼容 utility 类和嵌套 modifier
官方文档给的正则太理想化，实际项目里混着 u-margin-top-16 这类工具类，或 card__header--large--dark 这种非法嵌套修饰符，硬套默认规则会放行或误杀。
推荐正则写法（兼容 utility + 基础 BEM）：
^(u-[a-z][a-zA-Z0-9]+|([a-z][a-zA-Z0-9]+(__[a-z][a-zA-Z0-9]+)?(--[a-z][a-zA-Z0-9]+)?))$
注意点：
- 禁止写
card__header--large--dark，BEM 不允许修饰符嵌套，应拆成两个 class：card__header--large card__header--dark -
--和__是硬性锚点，写成_或-单字符，工具链就识别不了 - 禁用
selector-max-id等无关规则，它们和 BEM 无关，只增加误报
JS 中手拼 className 是最高危破规点
本地开发看着能跑通，但 CI 构建环境对空格、大小写、连字符更敏感，button__icon_error 少个 - 或多一个空格，就变成无效类名，样式失效且无提示。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
危险写法：className={`button button--${variant} ${hasIcon ? 'button__icon' : ''}`}——缺空格、button__icon 脱离 block、无防错
推荐封装常量：const BLOCK = 'search-form'; const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`，调用 cn('input', 'disabled') 得到 search-form__input--disabled
若用 CSS Modules，坚持 import styles from './Button.module.css' + className={styles['button--loading']}，永远不硬写哈希类名
HTML 和 JSX 中的 class 名也要校验
stylelint 只管 CSS 文件，但 class 名写错发生在 HTML/JSX 里才真正生效。光校 CSS 类名格式不够，还得查它是否被真实引用。
搭配 html-validate 和 ESLint：
-
html-validate检查模板中是否存在未定义的 BEM 类名，比如写了class="card__footer__copyright"但 CSS 里没声明 -
ESLint配合eslint-plugin-react拦截后代选择器写法，如className="header logo"或className={"button " + (isActive ? "button--active" : "")}这类字符串拼接 - 所有
class绑定必须走函数生成，禁止自由:class或className字符串直写
真正卡点不在正则多严，而在 JS/HTML 里有没有把 BEM 当作“契约”来执行——类名一旦脱离 block 上下文，隔离就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
