应优先用语义化标签替代无意义div嵌套，删减仅用于样式布局的wrapper类div，配合display: contents隐藏无语义父节点，并在组件中使用Fragment或template避免冗余节点。
HTML 组件本身不处理“依赖”，所谓复杂嵌套依赖，本质是 DOM 结构混乱 + 语义断裂 + CSS/JS 查询失焦三者叠加的结果。真正要做的不是“管理依赖”，而是砍掉无意义嵌套、明确每一层的语义职责、让浏览器和辅助技术能线性理解结构。
用语义标签替代 wrapper div，直接减少 2–3 层嵌套
深层嵌套最常见的源头，是为样式或布局硬加的 div class="wrapper"、div class="container"。它们既不传达内容意图，又干扰 JS 查询（比如 document.querySelector('main .card .content p') 在 DOM 变深后极易失效）。
- 把
<div class="header"><div class="container">...</div></div>改成<header class="header">...</header>——<header>原生支持display: flex、padding和margin -
<main>必须且只能出现一次，绝不能包在<section>或<div>里；否则屏幕阅读器跳过主内容，SEO 工具可能降权 - 导航栏不用
<div class="nav">，改用<nav>；文章小节优先用<section>，且每个<section>内必须有<h2>–<h6>
用 display: contents 让无语义父节点“视觉消失”
有些嵌套删不掉（比如 Vue/React 框架生成的 <div data-v-xxx>），但又不想它参与布局计算——display: contents 就是为此设计的：它让父元素退出渲染树，子元素直接受上层 flex/grid 控制，DOM 层级不变，但重排范围大幅收窄。
- 只在 Chrome 65+、Firefox 63+、Safari 15.4+、Edge 79+ 支持；IE 完全不支持
-
document.querySelector('.parent')仍能拿到节点，但getComputedStyle(element).height会返回auto - 别对
<form>或<table>父级乱用——它们有强制渲染语义，display: contents可能导致表单控件失焦或表格错位
组件模板中避免“金字塔缩进”，用 Fragment 替代包裹 div
Vue/React 中最常被忽略的嵌套来源，是 v-for 或 map() 返回多个节点时，硬塞一个 <div> 当父容器。这不仅加了一层 DOM，还可能破坏 CSS Grid/Flex 的直系子项规则（比如 grid-template-columns 只对直接子元素生效）。
立即学习“前端免费学习笔记（深入）”；
- Vue：用
<template v-for>替代<div v-for>，<template>不生成真实节点 - React：用
<></>（Fragment）或<React.Fragment>，尤其在列表项返回<img>+<p>时 - 不要为“统一 class”给 Fragment 加 class——它不支持；需要样式控制就抽成子组件，或用
data-*属性配合 CSS attribute 选择器
嵌套超过三层时，优先检查语义是否错位
结构上允许无限嵌套，但超过三层后，屏幕阅读器播报容易混乱，键盘用户用 ArrowDown 也容易跳过中间层级。更关键的是：你很可能正在用错标签。
- 用
<ol>套<ol>表示步骤中的子步骤没问题；但用它表达「分类 > 子类 > 标签」就违背了有序列表本意——这时候该换<ul>或直接上<nav> - 医疗文档或法律条文等强结构场景，建议用 CSS
counter-reset/counter-increment实现「A.1.a」编号，但限制 DOM 层级为 3 层 - 导航类树形菜单，优先走
role="tree"+role="treeitem"路线，而非靠<ol>堆叠
真正难的不是写多深的嵌套，而是每次加一层前，能不能清楚说出“这一层存在的唯一理由”。如果答案是“为了 padding”“为了居中”“因为框架生成的”，那它大概率该被删或替换。
