BEM本身不降低代码量，但能显著降低维护成本，因其将DOM结构、祖先类、标签类型等隐式依赖显式写入类名，如.user-card__title替代.user-card .title，消除静默失效与意外污染。
直接说结论：BEM本身不降低代码量，但能显著降低「改一处、查八处、崩三处」的维护成本。关键不在命名多规范，而在把隐式依赖（DOM结构、祖先类、标签类型）全部显式写进类名里。
为什么改个 .title 会连带崩掉购物车和弹窗
传统写法如 .user-card .title 或 .header h3 把样式生效条件藏在 HTML 层级里。一旦 DOM 结构微调（比如把 <h3> 换成 <div role="heading">），样式就静默失效；更糟的是，它可能意外匹配到另一个模块的 .title，导致改 A 却崩 B。
BEM 强制写成 .user-card__title 或 .header__logo，类名自带作用域——它不关心你在哪、嵌多深、用什么标签，只认这个字符串。重构时删文件、挪组件、换框架，样式依然稳。
- 禁止用
.user-card .avatar这类组合选择器，必须显式写出.user-card__avatar - 禁用标签选择器：
button、p、ul全部换成带模块前缀的类名 - 模块名必须语义化且唯一，拒绝
.section、.block这类泛义词
stylelint-selector-bem-pattern 不配等于没用
默认的 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，不通过就阻断合并
JS 动态拼接类名时最容易漏掉的三个点
React/Vue 中不是逻辑写错才出问题，而是拼写和结构断裂：
- 漏写 Block 前缀：
className={isFeatured ? 'featured' : ''}→ 应为product-card--featured - 连字符写错：
card__title--large（非法）→ 正确是card__title--large（注意双中划线只用于 modifier） - 大小写混用：
Card__header和card__header在 Linux 构建环境视为不同类名，样式丢失且无报错 - 建议统一用
clsx或封装bem('card', { featured: isFeatured })工厂函数，别手写模板字符串
修饰符命名不当怎么引发回归 Bug
常见错误是把数据状态当视觉修饰符用，比如 button--is-loading 或 card--has-data。这类名字不描述外观，CSS 里得靠人猜“那它该变灰？还是加 spinner？”，后续有人加 transition: opacity .3s，所有带 --is-loading 的组件就一起淡入——哪怕其中几个根本不该动。
正确做法是只用视觉/交互导向的修饰符：
-
button--loading→ 对应明确样式：禁用 + spinner + 灰色背景 -
card--empty→ 对应明确样式：内容区为空白占位 - 禁止出现
button--is-disabled或button--should-hide这类模糊表达 - 状态类（
is-开头）可与 BEM 并存，但必须纯状态描述，不带样式逻辑（比如不要写is-red）
真正难的不是写对第一个 .card__title--large，而是在第 27 个组件、第 3 次迭代、第 4 个外包团队接手时，还能一眼看懂每个类名归属哪块、影响哪些状态、是否已被废弃。BEM 的价值，就卡在这个「人肉可读性」的临界点上。
