div 是无语义的布局容器，仅用于分组、定位或样式控制；必须用时仅限无更优语义标签、Grid/Flex父容器或动态DOM占位；禁用替代语义元素、避免样式化类名、减少嵌套层级。
div 标签本质就是无语义的布局容器
它不表达任何内容含义，只提供一个可套样式的块级盒子。浏览器默认渲染为 display: block，但除此之外没有预设样式、无障碍角色或语义价值。用它只是为了分组、定位、添加 class 或控制布局流——不是为了“结构化内容”，那是 section、article、nav 干的事。
什么时候必须用 div，什么时候不该用
必须用的情况极少，典型的是：需要包裹一组元素但找不到更合适的语义标签；CSS Grid / Flex 容器需要一个父级；动态插入 DOM 时临时占位。
- 不要用
div替代button做按钮（可访问性崩坏） - 不要用
div包裹标题+段落就当它是文章（该用article） - 导航栏别写成
，直接用 - 表单控件外层别套
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 都增加 DOM 节点数、重排开销、屏幕阅读器遍历负担。
立即学习“前端免费学习笔记（深入）”；
Hello
能扁平就扁平，必要时用伪元素、CSS 容器查询或 :has() 减少包裹层级。
真正难的不是怎么用 div，而是每次敲下 时，有没有停下来想两秒：这里真没别的标签更合适？
