必须将bem语法规则强制嵌入开发流程：stylelint-selector-bem-pattern需严格配置componentname正则、白名单校验、pre-commit精准扫描变更文件、html/js层同步校验class值，并禁用手拼classname及防范ssr hydration mismatch。
不能靠培训或文档，必须把 BEM 当成语法来校验——写错 card__title--large 就报错，拼出 card__title--large--dark 就过不了 CI。
stylelint-selector-bem-pattern 必须锁死 componentName 正则
默认配置形同虚设，它允许 _header、Btn、1col-layout 这类非法块名。不改规则，等于没装插件。
-
componentName: '[a-z][a-zA-Z0-9]+'：强制小写字母开头，禁用大驼峰、下划线、数字开头 - 若团队用中划线（如
search-form），正则得改成'[a-z][a-z0-9]+(-[a-z0-9]+)*'，否则search-form__input会被判错 - 禁用泛义块名：在
postcss-bem-linter的components配置里明确白名单，main、content、box不在其中就直接报错
pre-commit 钩子只扫真实变更的 SCSS 文件
很多人把 stylelint "**/*.scss" 塞进 husky，结果每次提交都扫全量文件，CI 超时、本地卡顿、还误报 legacy 代码——根本原因是没过滤。
- 用
git diff --cached --name-only --diff-filter=ACM | grep '\.scss$'提取本次暂存区里真正改动的样式文件 - 脚本开头加
cd $(git rev-parse --show-toplevel)，否则.stylelintrc.js找不到，规则失效 -
stylelint --fix绝对不能出现在 pre-commit：它改了文件但不自动git add，违规代码照常提交；修复必须由开发者手动触发
HTML 和 JS 层也要同步校验 class 属性值
CSS 文件合规，不代表 HTML 里写的类名就对。JS 手拼、复制粘贴、漏双下划线，这些都在 HTML 中暴露，光查 CSS 是盲区。
- 用
html-validate配合自定义 rule，正则匹配class属性：^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$ - 重点拦截两类错误：
card__title--large--dark（嵌套 modifier）、card__title-large（单短横，应为双短横） - React/Vue 中禁止手拼
className字符串，统一用封装函数，比如cn('header', 'sticky')→card__header--sticky；函数内部必须校验参数合法性，cn('')或cn('card', '__header')应直接抛错
最容易被忽略的是 SSR hydration mismatch：服务端渲染出 user-card__avatar，客户端 JS 拼出 userCard__avatar（驼峰误用），React 就会重绘整块 DOM。这问题不会在本地开发暴露，只在构建后上线才爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
