BEM是防止样式失控的底线，通过块__元素--修饰符命名使样式不依赖DOM结构、标签类型或嵌套深度，确保重构、迁移和搜索时精准可控，且响应式逻辑必须绑定到单个BEM类上。
在复杂CSS布局中，BEM不是“显得重要”，而是防止样式失控的底线——没有它，类名冲突、DOM变动导致样式静默失效、响应式逻辑无法收敛这三件事会同时爆发，且无法靠个人经验规避。
为什么改一个 .title 会意外崩掉审批流和报表页
传统写法如 .user-card .title 或 .header h3 把样式生效条件藏在 DOM 层级和标签类型里。一旦把 <h3></h3> 换成 <div role="heading">，样式就静默失效；更危险的是，它可能意外匹配到另一个模块的 <code>.title，导致改 A 崩 B。
-
.user-card__title不依赖父容器、不依赖标签、不依赖嵌套深度，只认这个字符串 - 重构时挪组件、换框架（比如从 Vue 迁到 React）、删废弃模块，只要类名还在，样式就稳
- 全局搜索
user-card__title能精确命中所有相关样式，不会误伤其他.title
为什么响应式逻辑必须绑定到单个 BEM 类上
常见错误是把 is-mobile 当全局开关，或让 @media 规则散落在十几个文件里。BEM 要求所有响应式变更必须显式关联到具体组件状态，比如 .product-card--stacked（整块结构切换）或 .button__icon--right（仅元素自身微调）。
- 禁止写
.product-card .price配合媒体查询——这种选择器一挪 DOM 就失效，且无法被stylelint-selector-bem-pattern拦截 -
@media块内只允许出现一个 BEM 类选择器，不许嵌套、不许带空格 - JS 监听
matchMedia后显式添加类，而不是靠 CSS 自动推导——修饰符是“状态信标”，不是自动触发器
为什么 stylelint-selector-bem-pattern 不配等于没用
默认的 stylelint 对 BEM 几乎零约束。.btn-primary、.modal-close-btn 全部畅通无阻。必须手动启用插件并严格配置：
立即学习“前端免费学习笔记（深入）”；
- 设为
ignoreSelectors加上["/^\..+:(hover|focus|active|disabled)/"]，避免误报伪类 - 禁用
.card .card__title、.disabled这类孤立修饰符、user-card__button--这种拼接漏参数的 JS 动态类名 - CI 阶段不通过就阻断合并——真正卡住问题的，从来不是人记不记得规范，而是机器能不能当场拦住
最常被忽略的一点：BEM 只管名字，不管谁覆盖谁。如果 .card__title--large 和 .card__title--small 冲突，问题不在命名，而在 CSS 文件引入顺序或层叠权重没管住——这需要构建时校验 + 目录结构契约 + 团队对“块即模块”的本能认知，缺一不可。
