BEM禁止嵌套选择器，因浏览器从右向左匹配导致性能下降且语义错误；.card__header__title非法，应拆分为独立Block；仅允许媒体查询、伪类状态、主题切换三类安全嵌套，深度≤2。
它直接让嵌套选择器失去存在必要——.card .card__title这种写法在BEM项目里不是“不够好”，而是**非法**。
浏览器匹配是从右往左，不是从左往右
写.header .nav .item时，浏览器先找所有.item，再逐个往上查父级是不是.nav，再查.nav的父级是不是.header。DOM越深、同名元素越多，回溯路径越长。
- 5层嵌套在低端Android设备上
Recalculate Style耗时可能比.nav__item单类名高4倍以上 -
div ul li a这类纯标签组合会强制全量扫描，哪怕只用在局部也拖慢全局匹配 - DevTools Performance面板里
Recalculate Style突然飙升，大概率就是这类选择器在卡住渲染流水线
.card__header__title是错的，不是手误而是语义崩坏
BEM规定Element只能直属于Block，不允许跨层嵌套。写.card__header__title等于把header当成新Block，但card__header本身只是card的一个Element，没资格当父级。
- 后果：改
card__header结构（比如换成card__section），card__header__title就静默失效 - 正确做法是识别独立UI单元——如果图标+文字构成一个可复用单元，就该抽成
.icon-text这个新Block，而不是拉长链式命名 - SCSS里写
&__header { &__title { } }会编译出非法类名，且容易误给card__header加padding，破坏Element的纯展示语义
嵌套只允许出现在三类安全场景，且深度≤2
BEM不反对所有嵌套，但必须收口到明确、可控的边界内。真正需要嵌套的只有：
- 媒体查询：
@media (min-width: 768px) { .card__title { font-size: 1.2rem; } }——编译后仍是单类名，无回溯 - 伪类状态：
.card__submit:hover✅，但.card__submit:disabled❌（无法用JS切换，应改用.card__submit--disabled） - 主题切换：
.theme-dark .card__title✅，但.card .card__title❌（父类名不是主题或状态，是结构依赖）
工具链能帮你守住底线：构建后用grep -r "\.[a-z]\+ \.[a-z]" dist/快速揪出残留的空格分隔选择器——只要CSS文件里还存在带空格的.组合，就说明BEM还没真正落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
