单类名选择器（如.card__title）比嵌套选择器（如.card .card__title）性能更高，因浏览器从右向左匹配，前者直接哈希查找，后者需向上回溯父节点，深度嵌套在低端设备上耗时可高4倍以上。
直接用单类名选择器（如 .card__title）替代嵌套写法（如 .card .card__title），能显著降低浏览器“Recalculate Style”耗时——这不是命名习惯问题，而是匹配机制决定的硬性事实。
为什么浏览器匹配 .card .card__title 比 .card__title 慢得多
浏览器永远从右往左解析选择器。写 .card .card__title，它先扫描所有带 card__title 类的元素，再逐个向上检查父节点是否含 card 类。DOM 越深、列表项越多，这个回溯链就越长。
而 .card__title 是单类名，浏览器直接查 class 属性的哈希表，一次命中，无回溯。
- ≥4 层嵌套在低端 Android 设备上，style recalc 耗时可能比单类名高 4 倍以上
- DevTools Performance 面板里 “Recalculate Style” 持续 >16ms，大概率就是这类选择器在拖后腿
-
:hover、:focus放在最右边（如a:hover）会触发全量扫描，比用.link--hovered多出 2–3 倍成本
怎么验证你的 CSS 真的是 BEM 风格，而不是“假扁平”
很多项目写了 card__title 类名，却还在 CSS 里写 .card .card__title —— 这等于把 BEM 当装饰，实际输出的仍是嵌套选择器。
- 构建后执行
grep -r "\.[a-z]\+ \.[a-z]" dist/，能快速揪出所有带空格的选择器残留 - 打开 Chrome DevTools → Elements → Computed → Styles，看每条规则是不是纯
.xxx，有没有空格、标签名或属性选择器 - Sass 中混用
.card { &__title { } }和.card &__title，后者会编译出带空格的选择器，必须禁用
哪些地方可以安全嵌套，又不破坏性能
BEM 不要求绝对零嵌套，关键是控制深度 ≤ 2 层，且作用域明确。
- 媒体查询内允许 1 层嵌套：
@media (min-width: 768px) { .nav__item { display: flex; } } - 状态修饰符前置写法：
.is-open .modal__content是可接受的 2 层，比.modal.is-open .modal__content更易维护 - CSS-in-JS 场景下，可用
:where(.card) .card__title降权并避免样式泄漏，:where()不影响匹配性能 - 禁止在伪类中再嵌套：
.card:hover .card__title❌，应改用 JS 切换.card--hovered后写.card--hovered .card__title
真正卡住性能的，从来不是类名长度，而是选择器结构失控后引发的隐性回溯成本。哪怕只有一处 .list .item a 残留，在长列表滚动或 hover 动画中，都可能成为帧率瓶颈的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
