最有效解法是用.block__element--modifier替代深层嵌套选择器，BEM本质是将DOM层级“翻译”为类名结构，实现浏览器单次匹配、开发者快速定位。
直接用 .block__element--modifier 替代 .parent .child .grandchild 是最有效、成本最低的解法。BEM 不是加长名字，而是把 DOM 层级关系“翻译”成类名内部结构，让浏览器一次匹配到位，人也一眼能定位样式来源。
为什么嵌套超过 3 层就该立刻停手
浏览器匹配 .header .nav .item a:hover 时，先找所有 a:hover，再逐层向上验证父级——DOM 越深、元素越多，回溯路径越长。实测中，5 层嵌套在低端安卓设备上 Recalculate Style 时间可比单类名慢 4 倍以上。更实际的问题是：改一个中间类名（比如 .nav → .main-nav），整条规则就静默失效，DevTools 里根本看不出问题。
-
div ul li a这种纯标签选择器会强制全量扫描，哪怕只写在局部也污染全局匹配效率 -
:not(.valid) input[type="text"]这类组合会让浏览器放弃哈希索引，走全量字符串比对 - 权重飙升到
0-4-1后，后续覆盖基本只能靠!important或更长选择器，等于主动放弃维护性
怎么把嵌套结构“拍平”成合法 BEM 类名
核心不是删 HTML，而是重构语义：把「位置关系」转译为「类名结构」。例如卡片里的标题，不要靠 .card > .body > h3 定位，而是给它分配独立、带上下文的类名。
- 块名（
Block）必须是独立功能单元：product-card✅，card❌（泛称）、top-banner❌（含位置词） - 元素名（
Element）用双下划线，且只能是 Block 的直属子节点：product-card__title✅，product-card__header__logo❌（跨层） - 修饰符（
Modifier）用双短横，只表达状态或有限变体：product-card--featured✅，product-card--bg-blue❌（颜色应抽为 CSS 变量） - 禁止用标签名、ID 或属性选择器参与组合；所有样式必须由类名驱动
Less/Sass 里别用 @at-root 救火，优先用 &__elem 扁平化
@at-root 不是“跳出缩进”，而是“跳出选择器拼接上下文”。它解决的是被动嵌套（比如从 .modal .overlay 里意外生成 .tooltip），不是给 4 层嵌套打补丁。
立即学习“前端免费学习笔记（深入）”；
- 错：
.btn { @at-root { &--large { font-size: 18px; } } }→ 编译失败，@at-root后必须跟完整选择器 - 对：
.btn { @at-root @media (min-width: 768px) { &--large { font-size: 18px; } } }→ 输出干净的媒体查询 - 真正该做的：用
&__title替代.body .title，编译后就是.btn__title，权重恒为0-1-0 - 伪类/伪元素不算层级：
.btn:hover::before是安全的0-2-1，但.btn { &:hover { &::before { } } }在 Less 里容易误写成 3 层缩进，需人工卡点
第三方组件库怎么套 BEM
你没法改 ant-design 的 .ant-btn，但可以隔离作用域：
- 用 BEM 命名 wrapper：
my-form__submit-button，再通过 CSS Modules 或:where()降低权重干扰 - 禁用全局重置，改用
all: unset在 block 范围内清空，再逐个声明需要的样式 - 避免用
!important覆盖第三方样式——它污染整个继承链，改成用更具体的 BEM 类组合，如my-card__content my-card__content--scrollable - 状态组合必须明确：
button--loading和button--disabled同时存在时，谁的样式生效？不能堆修饰符，得靠文档或工具函数约束优先级
最容易被忽略的一点：BEM 只管命名与作用域，不管状态逻辑。当多个修饰符共存时，CSS 规则顺序决定最终表现——这没法靠命名规范自动解决，得靠团队约定或运行时工具兜底。
