BEM规范落地必须靠工具链强制拦截、目录结构硬约束和构建流程卡点三者协同；仅靠文档或口头提醒无法阻止PR中出现.btn-primary等破例写法，须将stylelint-selector-bem-pattern设为error级别并阻断合并。
跨团队协作时，BEM规范不是靠文档共识落地的，而是靠工具链强制拦截+目录结构硬约束+构建流程卡点——没有这三样，规范三天内就会在 PR 里被绕过。
为什么 stylelint-selector-bem-pattern 必须设为 error 级别
靠 Code Review 或口头提醒拦不住手滑。只要有一个 .btn-primary 或 .header .logo 进入主干，其他团队就会立刻跟进“既然已有破例，那我也……”。
- 必须在
.stylelintrc.js中将plugin/selector-bem-pattern规则设为error，而非warning - CI 流程中加
npx stylelint "**/*.{css,scss}" --fix，失败即阻断合并 - 禁止使用
/* stylelint-disable */绕过，例外需提 issue 并经架构组审批
Block 名必须与目录路径严格一致
否则不同团队对同一块的理解会迅速发散。比如 user-card 块，如果 A 团队放在 src/components/UserCard/，B 团队放在 src/ui/card/，后续 user-card__avatar 和 card__avatar 就必然冲突。
- 所有新 Block 必须按
src/components/[block-name]/[block-name].module.scss路径存放 - 文件名、目录名、CSS 中的 block 名三者必须完全一致（全小写、中划线分隔）
- 禁止在 SCSS 文件中定义多个 block，一个文件只允许一个顶层
.block类
Modifier 的语义边界必须收口到业务状态，不能暴露样式细节
一旦出现 button--w-200px 或 card--bg-#f0f0f0，其他团队在做主题切换或响应式适配时就会集体卡住——因为没人敢动这个类，也不知道它在哪被用了。
立即学习“前端免费学习笔记（深入）”；
- Modifier 只允许用布尔值或有限枚举值：
--active、--disabled、--size-small、--theme-dark - 禁止含单位、颜色值、像素尺寸、临时标签（如
--v2、--new） - 所有修饰符必须和基础 block 共存：HTML 中必须同时存在
button和button--primary，不能只写后者
第三方组件和遗留 CSS 必须用 wrapper 隔离
不强行重写 Ant Design 或 Element Plus 的类名，但也不能让它们污染 BEM 边界。否则 A 团队改了 .el-button，B 团队的 user-form__submit 就可能意外失效。
- 第三方组件外层必须包一层 BEM wrapper：
<div class="user-form__submit-wrapper"><el-button></el-button></div> - 遗留全局类（如
.clearfix、.hidden）统一加命名空间：legacy-clearfix、legacy-hidden - 禁止在 BEM 文件中 @import 第三方 CSS，所有外部样式由构建层统一注入
最常被忽略的一点：BEM 不解决加载顺序问题。两个团队各自提交的 card--featured 和 card--highlighted 如果在打包后 CSS 中顺序颠倒，谁覆盖谁就取决于构建配置，而不是命名。所以必须在 webpack 配置中固化 CSS 引入顺序——先 node_modules，再 src/components 按字母序，最后是 src/layout，不能依赖开发者手动 import。
