BEM通过将隐式DOM依赖显式写入类名（如.user-card__title）来防止样式跨模块污染和静默失效，确保改A不崩B。它用block__element--modifier三层结构声明语义，使类名自带作用域、脱离HTML结构独立存在，并强制单类名选择器以实现物理隔离与精准定位。
为什么改一个 .title 会连带崩掉购物车和弹窗
传统写法如 .user-card .title 把样式生效条件藏在 DOM 层级里，一旦把 <h3> 换成 <div role="heading">，样式就静默失效；更危险的是，它可能意外匹配到另一个模块的 .title —— 改 A 却崩 B。BEM 强制写成 .user-card__title，类名自带作用域，不依赖位置、不依赖标签、不依赖祖先，只认这个字符串。
.user-card__title--small 这种写法到底在表达什么
BEM 不是拼名字游戏，而是三层语义显式声明：
-
.user-card是 Block：独立功能单元，可复用、可移植，不依赖上下文 -
.user-card__title是 Element：必须依附 Block 存在，不能单独使用（class="title"无效） -
.user-card__title--small是 Modifier：表示状态或变体，必须和 Block 或 Element 同时出现，不能单独用.title--small
这种结构让类名自解释，别人不用翻 HTML 就知道这个元素属于哪个组件、处于什么状态。
哪些地方绝对不能用 BEM，硬套反而坏事
BEM 是约束，不是万能膏药。以下场景不适合强行套用：
立即学习“前端免费学习笔记（深入）”；
- 工具类：
.u-text-center、.visually-hidden本身无 Block 上下文，加前缀反而冗余 - 重置类：
.reset-list、.no-margin是跨组件通用规则，不属于某个 Block - 全局主题类：
.theme-dark作用于整个页面，不是某块的变体 - 微前端子应用中已封装好的第三方 UI 组件，其内部类名由 SDK 控制，外部不应强加 BEM
强行给 Ant Design 的 Button 加 ant-button__icon 类，既违反其设计契约，又增加维护负担。
没配 stylelint-selector-bem-pattern 等于没用 BEM
默认 stylelint 对 BEM 几乎零约束。.btn-primary、.modal-close-btn 全部畅通无阻。必须手动启用插件并严格配置：
-
selector-bem-pattern设为{ "componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem" }，拒绝大驼峰和下划线开头 -
ignoreSelectors加上["/^\..+:(hover|focus|active|disabled)/"]，避免误报伪类 - 禁用
fix: true——语义纠错没法靠机器做，自动修复可能生成.card__content__title这种非法嵌套 - CI 流程里必须跑
stylelint --config .stylelintrc.js src/**/*.css，不通过就阻断合并
真正卡住问题的，从来不是人记不记得规范，而是机器能不能当场拦住错误写法。
