div 是无语义的布局容器，仅用于分组、定位或样式控制；必须用时仅限无更优语义标签、Grid/Flex父容器或动态DOM占位；禁用替代语义元素、避免样式化类名、减少嵌套层级。
div 标签本质就是无语义的布局容器
它不表达任何内容含义，只提供一个可套样式的块级盒子。浏览器默认渲染为 display: block，但除此之外没有预设样式、无障碍角色或语义价值。用它只是为了分组、定位、添加 class 或控制布局流——不是为了“结构化内容”，那是 section、article、nav 干的事。
什么时候必须用 div，什么时候不该用
必须用的情况极少，典型的是：需要包裹一组元素但找不到更合适的语义标签；CSS Grid / Flex 容器需要一个父级；动态插入 DOM 时临时占位。
- 不要用
div替代button做按钮（可访问性崩坏） - 不要用
div包裹标题+段落就当它是文章（该用article） - 导航栏别写成
<div class="nav">...</div>，直接用<nav> - 表单控件外层别套
div来“对齐”，优先用fieldset或语义化组合
div 的 class 命名直接影响维护成本
写 class="left-box" 或 class="red-bg" 是在埋技术债。CSS 类名应描述“它是什么”，而不是“它长什么样”或“它在哪”。否则换主题、改布局时要全局搜替换。
- ✅ 推荐：
class="product-card"、class="notification-banner" - ❌ 避免：
class="float-right"、class="margin-20"、class="blue-text" - 现代项目中，如果只是单次布局需求，考虑用
style属性或 CSS-in-JS 更直接
div 嵌套过深会拖慢渲染和可维护性
Chrome DevTools 里看到 <div><div><div><div>…</div></div></div></div> 是危险信号。每层 div 都增加 DOM 节点数、重排开销、屏幕阅读器遍历负担。
立即学习“前端免费学习笔记（深入）”；
<!-- 反例：纯为样式加的冗余层 -->
<div class="wrapper">
<div class="inner">
<div class="content">
<p>Hello</p>
</div>
</div>
</div>能扁平就扁平，必要时用伪元素、CSS 容器查询或 :has() 减少包裹层级。
真正难的不是怎么用 div，而是每次敲下 <div 时，有没有停下来想两秒：这里真没别的标签更合适？
