应优先用语义标签替代无意义div嵌套，配合display: contents隐藏无语义父节点，并在组件中使用Fragment或template避免冗余节点，从而在满足结构需求的同时保障语义、无障碍与布局逻辑。
HTML组件化开发中，复杂嵌套不是靠多套
实现的，而是靠语义标签、为什么直接用
display: contents、<template></template>或为什么直接用嵌套在组件里是错的
Vue/React 中常见写法：<div v-for="item in list"><img><p>{{ item.text }}</p></div>，表面看没问题，实际加了一层无意义 DOM 节点：
- 破坏 Flex/Grid 直系子项规则：父容器设了
display: flex，但真正要排布的 <img> 和 <p> 被包在中间一层 <div> 里，不再受 flex 控制
- JS 查询变慢：多一层 DOM，
document.querySelector('.item img') 路径更长，且易因 class 拼错或层级变动返回 null
- 屏幕阅读器无法识别逻辑分组：一堆
<div> 堆叠，读不出“这是列表项”或“这是卡片内容”
- 服务端渲染时 HTML 字节数增加，首屏解析时间微升（可测，常被忽略）
用 Fragment 或 template 替代包裹 div
目标是让多个节点共存于同一层级，又不引入额外 DOM 节点：
- Vue：改用
<template v-for>，它不生成真实节点，v-for 的每个迭代项直出 <img> 和 <p>
- React：用
<></>（短语法 Fragment）或 <React.Fragment></React.Fragment>，尤其适合返回 <img> + <p> 这类组合
- 注意：
<React.Fragment> 不支持 class 或 id；需要样式控制就抽成子组件，或用 data-* 属性配合 CSS attribute 选择器（如 [data-role="card-item"]）
display: contents 让无意义父节点“视觉消失”
有些嵌套删不掉（比如框架注入的 <div data-v-xxx>），但又不想它参与布局计算：
立即学习“前端免费学习笔记（深入）”；
- 加
style="display: contents" 后，该元素退出渲染树，子元素直接受上层 flex/grid 控制
- DOM 结构不变：
document.querySelector('.parent') 仍能拿到节点，但 getComputedStyle(el).height 会返回 auto
- 兼容性注意：IE 完全不支持；Safari 15.4+、Chrome 65+、Firefox 63+、Edge 79+ 支持
- 禁用场景：
<form>、<table>、<select> 等有强制渲染语义的父级不能乱用，否则表单控件失焦或表格错位
语义标签替代 wrapper 类 div 是最省力的解法
把仅用于样式布局的 <div class="wrapper"> 换成原生语义标签，往往能直接砍掉 2–3 层嵌套：
-
<div class="header"><div class="container"> → <header class="header">，<header> 本身支持 display: flex 和 padding
-
<div class="nav"> → <nav>，屏幕阅读器能识别为导航区域
-
<main> 必须且只能出现一次，别把它包进 <section> 或 <div> —— W3C 明确禁止，否则语义失效
-
<p>、<h1>～<h6> 内**不允许放 <div>**，浏览器会自动修复 DOM，把 <div> 挤到外面，导致结构错乱
真正难的不是怎么嵌，而是判断哪一层该留、哪一层该删——每层标签必须承担明确职责，否则就是技术债。嵌套越深，越要反问：这个父节点是语义必需，还是只是 CSS 没抽离干净？
Vue/React 中常见写法：<div v-for="item in list"><img><p>{{ item.text }}</p></div>，表面看没问题，实际加了一层无意义 DOM 节点：
- 破坏 Flex/Grid 直系子项规则：父容器设了
display: flex，但真正要排布的<img>和<p>被包在中间一层<div>里，不再受 flex 控制 - JS 查询变慢：多一层 DOM，
document.querySelector('.item img')路径更长，且易因 class 拼错或层级变动返回 null - 屏幕阅读器无法识别逻辑分组：一堆
<div>堆叠，读不出“这是列表项”或“这是卡片内容” - 服务端渲染时 HTML 字节数增加，首屏解析时间微升（可测，常被忽略）
用 Fragment 或 template 替代包裹 div
目标是让多个节点共存于同一层级，又不引入额外 DOM 节点：
- Vue：改用
<template v-for>，它不生成真实节点，v-for的每个迭代项直出<img>和<p> - React：用
<></>（短语法 Fragment）或<React.Fragment></React.Fragment>，尤其适合返回<img>+<p>这类组合 - 注意：
<React.Fragment>不支持class或id；需要样式控制就抽成子组件，或用data-*属性配合 CSS attribute 选择器（如[data-role="card-item"]）
display: contents 让无意义父节点“视觉消失”
有些嵌套删不掉（比如框架注入的 <div data-v-xxx>），但又不想它参与布局计算：
立即学习“前端免费学习笔记（深入）”；
- 加
style="display: contents"后，该元素退出渲染树，子元素直接受上层 flex/grid 控制 - DOM 结构不变：
document.querySelector('.parent')仍能拿到节点，但getComputedStyle(el).height会返回auto - 兼容性注意：IE 完全不支持；Safari 15.4+、Chrome 65+、Firefox 63+、Edge 79+ 支持
- 禁用场景：
<form>、<table>、<select>等有强制渲染语义的父级不能乱用，否则表单控件失焦或表格错位
语义标签替代 wrapper 类 div 是最省力的解法
把仅用于样式布局的 <div class="wrapper"> 换成原生语义标签，往往能直接砍掉 2–3 层嵌套：
-
<div class="header"><div class="container">→<header class="header">，<header>本身支持display: flex和padding -
<div class="nav">→<nav>，屏幕阅读器能识别为导航区域 -
<main>必须且只能出现一次，别把它包进<section>或<div>—— W3C 明确禁止，否则语义失效 -
<p>、<h1>～<h6>内**不允许放<div>**，浏览器会自动修复 DOM，把<div>挤到外面，导致结构错乱
真正难的不是怎么嵌，而是判断哪一层该留、哪一层该删——每层标签必须承担明确职责，否则就是技术债。嵌套越深，越要反问：这个父节点是语义必需，还是只是 CSS 没抽离干净？
