BEM提升性能的关键在于强制生成单类名选择器（如.card__title），使浏览器能直接哈希查找、避免从右向左回溯父节点；若编译输出含空格的选择器（如.card .card__title）或HTML未配合，则性能优势失效。
有影响，但不是因为名字长得像 header__logo--dark 就变快——真正起作用的是它强制你写出的单类名选择器，让浏览器跳过 DOM 回溯匹配。
为什么 .card__title 比 .card .card__title 快得多
浏览器永远从右往左匹配选择器。遇到 .card .card__title，它先扫描所有带 card__title 类的元素，再逐个往上检查父节点是否含 card 类；而 .card__title 是单类名，直接查 class 属性哈希表，一次命中。
- DOM 越深、列表项越多，回溯链越长，低端 Android 设备上 style recalc 耗时可能高出 4 倍以上
-
Recalculate Style在 Performance 面板里持续 >16ms，大概率就是这类嵌套在拖后腿 - 伪类写在右边（如
a:hover）会触发全量扫描，比用a--hovered多出 2–3 倍成本
哪些 BEM 写法看似规范，实际破坏性能
名字带双下划线 ≠ 真 BEM。很多项目编译后仍输出慢选择器，问题藏在构建流程里。
- Sass 中写
.card { &__title { } }是安全的，但.card { & .card__subtitle { } }会编译出带空格的选择器 -
@media里写.card .card__title→ 应该用.card__title--lg替代 -
.card__title:hover语义错误且不可控；正确做法是 JS 切换.card--hovered，再配.card--hovered .card__title - HTML 没跟上：写了
.card__title规则，但 DOM 里仍是<div class="card"><h2 class="card__title">→ 实际仍依赖.card .card__title匹配
怎么验证你的 CSS 真的是 BEM 风格
光看文件名或注释没用，得看最终生成的选择器字符串。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Elements → 选中元素 → Computed → Styles，确认每条规则是纯类名，没有空格、标签名或属性选择器
- Linux/macOS 下运行：
grep -r "\.[a-z]\+ \.[a-z]" dist/快速扫出含空格的选择器 - Webpack 用户可在
css-loader配置中启用exportOnlyLocals: true，避免意外注入全局嵌套规则 - CI 中接入
stylelint-selector-bem-pattern，拦截.modal .modal__close这类退化写法
真正卡住性能的，从来不是类名长度，而是选择器是否真实扁平、是否被构建流程悄悄转义、是否在媒体查询或伪类场景下退化——这些地方不盯紧，BEM 就只是个好听的名字。
