html深层嵌套抬高性能、可维护性、无障碍门槛；识别冗余层需判断是否具备语义、样式绑定、事件监听、ref引用四类不可替代职责，否则应删除。
HTML 深层嵌套不是“看起来乱”，而是直接抬高了性能、可维护性、无障碍三道门槛——删掉一个无语义的 BEM 是解决 CSS 上下文依赖的方案，不是给深层嵌套贴膏药。当你的类名写成 <div>，可能比优化一段 JS 更快见效。
<h3>怎么一眼识别该删的嵌套层</h3>
<p>别数层数，看它有没有“不可替代的职责”。浏览器和屏幕阅读器不关心你写了几个 <code><div>，只认语义、样式绑定、事件监听、ref 引用这四类存在理由。
<ul><li>如果某个 <code><div> 的唯一作用是加 <code>margin 或居中，把它删了，把样式直接写到 <section></section> 或 <article></article> 上
>（Fragment）而不是 <div> 包裹；否则构建产物里会多一层无意义 DOM 节点
<li>Lighthouse 报告里 DOM depth > 6 就标红，但更关键的是：当你发现要三层 <code><div> 才能写出按钮 hover 效果，问题不在 CSS，在结构本身已失焦
<h3>语义化标签不是“加分项”，而是扁平化的基础设施</h3>
<p>用 <code><header></header>、<nav></nav>、<main></main> 替代 <div class="header">，不是为了语义正确，是为了让浏览器少建节点、少算样式、少走重排路径。
<ul>
<li>
<code><main></main> 必须且只能出现一次，它是页面主体的语义锚点；加 class="main-wrapper" 属于自我否定<section></section> 应按内容逻辑切分（如“用户评价”），不是为了对齐或留白硬拆；每个 <section></section> 天然支持 display: flex 和 gap，无需外层容器<thead><tr><th><div><span> 堆叠；压缩为单行 <code><tr>，复杂层级用 <code>data-level 或 aria-label 补充，不靠 DOM 嵌套表达
<details><summary></summary></details> 折叠，而不是靠嵌套 <div> 实现视觉分层
<h3>现代 CSS 布局让 wrapper div 成为历史遗留物</h3>
<p>Flexbox 和 Grid 不是“新特性”，而是消除嵌套的刚需工具。过去靠 wrapper 清浮动、撑高度、做栅格，现在这些都该由父元素自身承担。</p>
<ul><li>导航栏直接用 <code><nav></nav> + display: flex，别再套 <div class="nav-container">
<li>三列布局别写 <code><div class="row"><div class="col">A</div></div>；改用 <main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"></main> 直接定义display: contents：它能让父容器不参与盒模型，但 IE 不支持，且会剥离可访问性树中的节点，实际项目中不如直接删掉那层grid 容器里再套 flex 做微调——这往往说明模块边界没想清，该拆的是组件，不是硬塞嵌套BEM 类名不能掩盖结构失焦，反而会放大问题
card__body__content__inner__button，问题不在命名，而在结构本身已经失控。
block__element--modifier；button__icon--large 错写成 button-icon--large（缺双下划线），就变成新 block，破坏隔离card__title__highlight 是错的，应拆成 card__title card__title--highlight
btn-primary 模糊，应为 button--theme-dark，脱离上下文就失效<div class="xxx__yyy--zzz">，先别调样式，打开 Elements 面板删掉最外层 div 看是否崩 layout —— 崩了说明它承担了布局职责，不崩就该删
<p>扁平不是删标签，而是让每个标签都有不可替代的语义职责。DOM 节点数超 1500 就可能触发频繁 GC，尤其在长列表页；而真正难重构的，往往是那些“删了怕崩、留着又重”的 wrapper，它们背后常连着未解耦的样式逻辑或状态管理副作用。</p>
</div>
