BEM禁止使用div.card等标签+类组合选择器，因其将样式与DOM结构强耦合，导致HTML标签变更（如div换为article）时样式立即失效；必须仅用.card、.card__title、.card--loading等纯类名选择器，确保作用域隔离与复用性。
为什么BEM禁止写 div.card 这类标签+类组合选择器
BEM 的样式作用域必须完全由类名自身承载，一旦混入 div、section 等标签名，就等于把样式和 DOM 结构强绑死。HTML 里把 <div class="card"> 换成 <code><article class="card"></article>，样式立刻失效——这不是浏览器不支持，而是你主动放弃了复用能力。
常见错误现象：.header__nav ul li a 表面加了 BEM 前缀，实际仍依赖 ul/li 结构；后续改用 Flexbox 或自定义元素时，整套导航样式得重写。
- 所有核心样式规则必须只基于类名：
.card、.card__title、.card--loading✔️ - 禁止任何标签名、属性选择器（如
[data-role]）、伪类（如:first-child）参与关键样式定义 ❌ - 真需区分容器语义（比如
<header></header>和<section></section>下的 card 行为不同），应通过顶层类控制：.layout-header .card或[data-layout="header"] .card，而非硬绑标签
.card__title:hover 和 .card__title--hover 哪个更符合 BEM
.card__title:hover 是合法且推荐的写法；.card__title--hover 是典型误用。BEM 的 -- 修饰符只描述**静态、可复用的状态或变体**（如 --disabled、--compact），而 :hover 是用户交互触发的临时反馈，不属于组件固有状态。
混淆这两者会导致：
立即学习“前端免费学习笔记（深入）”；
- 同一交互逻辑在不同组件里重复定义（如
.btn--primary:hover和.link--primary:hover），违反 DRY - JS 主动添加
--hover类模拟悬停时，会和真实伪类冲突，调试时无法判断是哪段逻辑生效 - 基础交互统一由基础类接管：
.card__title:hover { color: #007bff; }，不带 Block 前缀也行，只要不污染全局 - 仅当某修饰符需要覆盖默认交互行为时，才显式写
.card__title--disabled:hover { cursor: not-allowed; }
如何验证你的 CSS 真正在走单类路径
别信源码结构，只看最终注入页面的选择器字符串。Chrome DevTools → Elements → 选中目标元素 → 右侧 Styles 面板，逐条检查每条规则的选择器是不是纯 .block__element--modifier 形式——有空格就是破功。
命令行快速扫雷：grep -r "\.[a-z]\+ \.[a-z]" dist/，命中即存在空格分隔的后代选择器。
- Sass 中写
.card { &__title { } }安全；但写.card { & .card__subtitle { } }就会编译出带空格的选择器 - Webpack 用户可配置
css-loader的exportOnlyLocals: true，防止嵌套规则意外泄漏到全局 - 真正卡住性能的，从来不是类名长度，而是选择器结构失控后引发的隐性回溯成本；哪怕只有一处
.list .item残留，在长列表滚动或 hover 动画中，都可能成为帧率瓶颈的起点
为什么 BEM 要求块名必须出现在每个类开头
类名前缀不是为了“看起来像 BEM”，而是把作用域直接编码进名字里。user-profile__avatar--xs 和 search-form__input--error 天然隔离，不会因都叫 input 或 avatar 而互相覆盖——这是微前端、SSR、后端模板直出 HTML 场景下唯一可靠的契约。
常见破功点：
- 伪 BEM：HTML 写
class="card card--featured"，但 CSS 里只定义了.card--featured，漏掉基础块样式，删 modifier 整个组件就崩 - 跨 Block 的 Element：把
card__title放到非card容器里，或写成card__header__title（BEM 不允许 Element 嵌套 Element） - 修饰符滥用：
button--width-200px这类含具体值的类名，换单位或加媒体查询就得新增一堆类，违背“修饰符描述状态”的原则
Block 名本身可以含短横（如 user-profile），但后续所有 __ 和 -- 必须紧贴，不能有空格或额外短横——这点容易被忽略，但工具链（如 stylelint-selector-bem-pattern）能帮你守住底线。
