ci中stylelint-selector-bem-pattern报error即规范落地，配置plugin/selector-bem-pattern且max-warnings 0时，漏基础类、错误嵌套、含值修饰符等均阻断pr；需严查空格选择器、block名收敛性、modifier独立存在及边界校准。
看CI里stylelint-selector-bem-pattern是否报error
工具链没卡死，规范就等于没落地。只要配置了plugin/selector-bem-pattern且max-warnings 0，任何.user-card--loading漏掉基础类、card__title__link嵌套Element、button--w-200含具体值的修饰符，都会在CI阶段直接阻断PR合并。
常见疏漏点：
- 误以为“能过pre-commit hook”就算合规——但hook通常只跑
--fix，而card-header（单短横线）这类错误无法自动修复，必须靠CI拦截 - 忽略
ignoreSelectors配置，导致.js-dropdown等JS控制类被误判，掩盖真实违规 - 没注册项目所有Block名（如
['product-card', 'search-form']），header__logo和logo都能过检，但后者实际是另一个Block，破坏隔离
查dist/css中是否存在带空格的选择器
BEM性能优势的前提是单类名匹配。一旦出现.card .card__title或.modal .modal__content，浏览器就得回溯DOM，Recalculate Style耗时会随节点深度指数增长。
实操命令：grep -r "\.[a-z]\+ \.[a-z]" dist/css/，命中即失败。重点排查：
- Sass中
& .card__subtitle这类手写空格写法（应改用&__subtitle） - 媒体查询内
@media (min-width: 768px) { .product-grid .product-card { } }（必须改为.product-grid--two-column或.product-grid__card--stacked） - 第三方UI库未隔离的CSS，比如
antd .ant-btn直接覆盖了button__label样式
翻Git历史看Block名是否稳定收敛
Block名一旦定型，就不该再出现新前缀。如果最近3个月提交里冒出homepage-banner、top-nav、sidebar-menu，说明团队仍在用位置词替代语义块名——这不是命名风格问题，是复用能力归零的信号。
验证方式：
- 执行
git log -p --grep="__" --since="3 months ago" | grep "class=" | sed 's/.*class=\"\([^"]*\).*/\1/' | grep -oE "[a-z]+-[a-z]+" | sort | uniq -c | sort -nr - 结果中若
user-card出现287次、profile-card出现12次、member-card出现9次，说明Block边界未对齐，后续维护必然要合并三套逻辑 - 发现
content-wrapper类名，基本可判定它内部的article-list或pagination才是真Block，当前结构已伪BEM化
抽样检查HTML中Modifier是否独立存在
class="button--loading"这种写法看着省事，删掉修饰符后整个按钮样式崩塌，违反BEM“modifier必须叠加在block或element上”的契约。真正合规的是class="button button--loading"或class="button__label button__label--hidden"。
快速验证：
- 在DevTools Elements面板中筛选
[class*="--"]，逐个点开检查其父级是否有对应Block类 - 发现
<div class="user-card__avatar--large"></div>单独存在，而父容器没有user-card，说明Element脱离上下文，复用性为零 - 看到
icon--primary这类命名，立刻定位：icon应是独立Block，不该依附于谁的修饰符
carousel样式？” 没人问，规范就只是文档里的几行字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
