应优先用语义化标签替代无意义div嵌套，删减仅用于样式布局的wrapper类div，配合display: contents隐藏无语义父节点，并在组件中使用Fragment或template避免冗余节点。
用语义标签替代 div 堆叠，直接砍掉 2–3 层嵌套
深层 <div> 嵌套（比如 <div><div><div><p>内容</p></div></div></div>）不是语法错误，但会让 JS 查询变慢、屏幕阅读器迷失、CSS 选择器失控。真正该删的，是那些只为了 margin/padding/flex 容器而存在的 <div class="wrapper">。
实操建议：
- 把
<div class="header"><div class="container">...换成<header class="header">...，<header>本身支持display: flex和padding -
<main>必须且只能出现一次，别把它包进<section>或<div>—— W3C 明确禁止，否则语义失效 - 导航栏不用
<div class="nav">，改用<nav>；文章章节优先用<article>或<section>，且每个<section>内必须有<h2>–<h6>
用 display: contents 让无意义父节点“视觉消失”
有些嵌套不能删（比如框架生成的 <div data-v-xxx>），但又不想它参与布局计算——display: contents 就是为此设计的：它让父元素退出渲染树，子元素直接受上层 flex/grid 控制，DOM 层级不变，但重排范围大幅收窄。
注意点：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- IE 完全不支持；Safari 15.4+、Chrome 65+、Firefox 63+ 支持；Edge 79+ 起支持
- 它不影响 DOM 结构和 JS 查询（
document.querySelector('.parent')仍能拿到），但getComputedStyle()对某些属性（如height）会返回auto - 别对
<form>或<table>父级乱用——它们有强制渲染语义，display: contents可能导致表单控件失焦或表格错位
组件化模板里避免“金字塔缩进”，用 Fragment 替代包裹 div
Vue/React 中最常被忽略的嵌套来源，是 v-for 或 map() 返回多个节点时，硬塞一个 <div> 当父容器。这不仅加了一层 DOM，还可能破坏 CSS Grid/Flex 的直系子项规则。
正确做法：
- Vue：用
<template v-for>替代<div v-for>，<template>不生成真实节点 - React：用
<></>（Fragment）或<React.Fragment>，尤其在列表项返回<img>+<p>时 - 不要为“统一 class”给 Fragment 加 class——它不支持；需要样式控制就抽成子组件，或用
data-*属性配合 CSS attribute 选择器
嵌套列表和 fieldset 分组，别让语义和结构打架
嵌套 <ol>/<ul> 很容易出错：子列表没包在 <li> 里，编号就重置；<fieldset> 套太深，Chrome 会延迟渲染。这不是写法问题，是语义误用。
关键判断：
-
<ol type="A"><li>A. 主项<ol type="1"><li>1. 子项</li></ol></li></ol>—— 子<ol>必须是<li>的**直接子节点**，否则变成两个独立列表 -
<fieldset>只用于逻辑强相关的表单分组（如「收货信息」「发票信息」），别用它包单个<input>，也别嵌套超过 2 层 - 超过 3 层嵌套的列表，辅助技术播报易混乱；法律/医疗类文档建议用 CSS
counter-increment实现 A.1.a 编号，但 DOM 层级压到 ≤3 层
真正难的不是“怎么删嵌套”，而是每次加标签前问一句：这个节点有没有不可替代的语义职责？如果答案是否定的，它大概率该被 display: contents 吞掉，或者直接从模板里拿掉。
