必须用单类名（如.card__title）替代多层选择器，因浏览器从右往左匹配时需对每个.title逐层向上回溯父级，DOM节点超500个时Recalculate Style易超20ms致掉帧；BEM通过单类名彻底消除回溯，是硬性性能门槛而非建议。
直接用单类名（如 .card__title）代替多层后代选择器（如 .page .main .content .card .title），是避免深层嵌套、提升可维护性的最有效做法——不是“应该考虑”，而是必须落地的底线。
为什么浏览器匹配深层选择器会变慢又难调试
浏览器解析 .a .b .c .d 时，不是从左往右“钻进DOM”，而是先找所有 .d 元素，再逐个向上验证是否在 .c 内、是否在 .b 内……每多一层，就多一次 DOM 树回溯。DOM 节点越多（比如商品列表渲染 200 个 .item），这个过程越吃 CPU。
常见现象包括：Recalculate Style 时间飙升、滚动掉帧、hover 响应发卡；DevTools 的“已计算样式”里，真正生效的规则常被压在十几条被覆盖的旧规则底下，人工定位要反复验证父级是否存在。
更实际的问题是：.a .b .c .d 的特异性为 0,0,4,0，而 .d 只有 0,0,1,0。这意味着后续 JS 动态加类（如 el.classList.add('is-hidden')）极难覆盖它，往往被迫加 !important 或写更重的选择器。
立即学习“前端免费学习笔记（深入）”；
BEM 类名如何天然规避嵌套依赖
BEM 不是“给类名加长”，而是把层级语义编码进类名本身，让每个样式只依赖一个 class，不查父节点、不回溯、不耦合。
-
.card__title就是.card__title，不管它在.section里、.modal里，还是单独挂 body 下，样式都生效 - 禁止写
.card .card__title—— 这等于双重声明：既说“我在 card 里”，又说“我就是 card 的 title”，逻辑冗余且脆弱 - 禁止
.card__header__title这类嵌套 Element：它违反 BEM 核心约束，说明你该把header抽成独立 Block（如.header），而非强行拼接 - Modifier 应表达状态（
.card--loading），而非位置（.card--top）；位置由布局工具类（如.u-mt-xl）控制
哪些场景还允许有限嵌套？怎么安全收口
完全不用嵌套不现实，但必须设硬边界：
- 伪类/伪元素可以嵌套：
a:hover、.btn::before不增加选择器层级计数 - 媒体查询内最多嵌套 1 层：
@media (min-width: 768px) { .navbar__item { display: flex; } }，不继续写.navbar__item .navbar__link - 主题或状态切换可用属性选择器：
[data-theme="dark"] .card__title，比.theme-dark .card .card__title更轻、更可控 - JS 动态作用域用
:scope：el.querySelector(':scope .btn-primary')只在 el 内部查找，无需写全路径
SCSS 中误用 & 是高频陷阱：.modal { & .close { opacity: 0.5; } } 编译出 .modal .close，纯属无意义加权；正确写法是 .modal__close 单类名，或仅在伪类中用 &:hover。
工具链怎么帮你守住这条线
靠自觉很难长期坚持，必须用工具设防：
- 用 Stylelint 配置
max-nesting-depth: 2和selector-max-compound-selectors: 3，CI 阶段直接拦截违规提交 - VS Code 安装 “BEM Tools” 插件，自动补全
block__element--modifier格式，减少手误 - Webpack/Vite 构建时接入 PurgeCSS，能暴露那些“写了但从没被 HTML 引用”的深层选择器，倒逼清理
- 禁止在 CSS-in-JS 中用
css`& > div`这类生成嵌套选择器的写法；改用styled.div.attrs({ 'data-role': 'card-title' })+ 属性选择器
真正难的不是记住 BEM 规则，而是每次写新 DOM 节点前，停下来问一句：这个节点是不是一个能独立存在、有明确功能边界的 UI 单元？如果不是，它就不该有自己的 Block 名——更不该靠多一个 __ 来“假装”合理。
