BEM严格校验不是负担而是止损线，因本地未配stylelint实时检查或文件名与block名不一致（如UserCard.css对应user-card），导致CI报错；必须开启插件并确保目录、文件、类名三者统一。
不能靠“先写快、后补规范”来平衡，敏捷开发里BEM的严格度不是负担，而是防止返工的止损线。一旦跳过校验，后面每小时节省的10秒，会变成未来3小时的排查成本。
为什么本地手写BEM类名在CI里总被拦住
常见错误现象：user-card__img--round 在本地能跑通，但CI报 Expected selector to match specified BEM pattern；或者开发者写了 card__image，但stylelint提示 Missing block prefix "user-card"。
根本原因不是工具太严，而是本地没配 stylelint 实时校验，或 VS Code 的 stylelint-plus 插件被禁用。更隐蔽的是：团队配置了 componentName: "user-card"，但有人新建组件时随手命名为 UserCard.css，插件按文件名推导 block 名失败，导致所有派生类名都被判违规。
- 必须在
.vscode/settings.json里显式开启"stylelint.enable": true，不依赖插件默认开关 -
stylelint-selector-bem-pattern的componentName必须和目录结构强对齐，例如src/components/UserCard/UserCard.css对应user-card，不能写成userCard或UserCard - 禁止在本地执行
npx stylelint --fix—— 它可能把.btn-primary错误重写成.btn__primary，而这不是语义修复，是破坏性替换
React/Vue里怎么让BEM不拖慢组件开发节奏
核心矛盾不在命名本身，而在“动态拼接类名”是否可预测。手写 className="user-card__image user-card__image--loading" 看似快，但只要 isLoading 变成 isImageLoading，就得同步改两处；一旦加个新状态 --error，还得手动补CSS规则。
真正提速的做法是封装可复用的生成逻辑，而非省掉那几个字符：
- 每个组件顶部定义
const BLOCK = "user-card"，所有类名基于它派生，重命名只需改一行 - 用
clsx处理条件：clsx(`${BLOCK}__image`, { [`${BLOCK}__image--loading`]: isLoading }) - 禁止在 JSX 中出现任何未声明的字符串，比如
"user-card__img"（漏了__）或"user-card-image"（用了中划线）
哪些BEM检查可以临时豁免，哪些绝对不能松动
工具链必须分层拦截：有些问题可以等 PR 阶段再卡，有些必须在保存文件瞬间就报错。
可延后校验（允许本地通过，CI 拦）：
-
.user-card__title:hover—— 伪类本身不违反 BEM，但需人工判断是否该由 JS 切换user-card--hovered更合理 -
@media (min-width: 768px) { .user-card__content { } }—— 媒体查询不影响选择器扁平性，只要没退化成嵌套即可
不可妥协的红线（本地保存即报错）：
-
.card__header（缺 block）→ 必须是.user-card__header -
.user-card .user-card__image（含空格）→ 浏览器匹配开销翻倍，且无法 tree-shake -
.user-card__image_error（单下划线）→ 工具链无法识别 modifier，--error才是唯一合法分隔符
BEM 的“严格”不是为了让人写得慢，而是把模糊判断提前固化成机器可验证的边界。最常被忽略的一点：所有 __element 必须真实存在于组件 DOM 根节点下——如果 user-card__image 被包在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
