CSS的BEM命名如何提升长期维护效率？

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 不是拼名字游戏，而是三层语义显式声明：

1. .user-card 是 Block：独立功能单元，可复用、可移植，不依赖上下文
2. .user-card__title 是 Element：必须依附 Block 存在，不能单独使用（class="title" 无效）
3. .user-card__title--small 是 Modifier：表示状态或变体，必须和 Block 或 Element 同时出现，不能单独用 .title--small

这种结构让类名自解释，别人不用翻 HTML 就知道这个元素属于哪个组件、处于什么状态。

哪些地方绝对不能用 BEM，硬套反而坏事

BEM 是约束，不是万能膏药。以下场景不适合强行套用：

1. 工具类：.u-text-center、.visually-hidden 本身无 Block 上下文，加前缀反而冗余
2. 重置类：.reset-list、.no-margin 是跨组件通用规则，不属于某个 Block
3. 全局主题类：.theme-dark 作用于整个页面，不是某块的变体
4. 微前端子应用中已封装好的第三方 UI 组件，其内部类名由 SDK 控制，外部不应强加 BEM

强行给 Ant Design 的 Button 加 ant-button__icon 类，既违反其设计契约，又增加维护负担。

没配 stylelint-selector-bem-pattern 等于没用 BEM

默认 stylelint 对 BEM 几乎零约束。.btn-primary、.modal-close-btn 全部畅通无阻。必须手动启用插件并严格配置：

1. selector-bem-pattern 设为 { "componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem" }，拒绝大驼峰和下划线开头
2. ignoreSelectors 加上 ["/^..+:(hover|focus|active|disabled)/"]，避免误报伪类
3. 禁用 fix: true——语义纠错没法靠机器做，自动修复可能生成 .card__content__title 这种非法嵌套
4. CI 流程里必须跑 stylelint --config .stylelintrc.js src/**/*.css，不通过就阻断合并

真正卡住问题的，从来不是人记不记得规范，而是机器能不能当场拦住错误写法。