bem是大型项目避免样式雪崩的底线手段，因其单类名选择器支持浏览器一次哈希查找，而嵌套选择器需从右往左逐层回溯父节点，dom越深性能差距越显著。
因为BEM不是“要不要用”的风格偏好，而是大型项目里避免样式雪崩的底线手段——它不解决所有问题，但一旦缺失，组件复用、多人协作、长期维护就立刻暴露脆弱性。
为什么BEM选择器在现代浏览器里依然比嵌套选择器快
BEM的性能优势不来自名字长短，而来自单类名选择器一次哈希查找。.user-card__avatar--loading是浏览器直接查 class 表；.user-card .avatar会让浏览器先找所有 .avatar 元素，再逐层向上检查父级是否匹配 .user-card，DOM 越深越慢。
- DevTools → Elements → Computed → Styles 面板里一眼就能看出有没有空格——有空格就是潜在性能隐患
- Sass 中写
.user-card { &__avatar { } }安全；但写.user-card { & .user-card__badge { } }就会编译出带空格的选择器 - 构建后用
grep -r "\.[a-z]\+ \.[a-z]" dist/快速揪出残留的空格选择器
为什么BEM能天然适配Vue/React组件边界
BEM 的 Block 几乎就是组件名的直译：.dialog 对应 Dialog.vue，.card__header 对应 <cardheader></cardheader>。这种映射不是巧合，是设计使然。
