空状态应使用语义化HTML元素包裹，推荐或带role="region"的，列表空状态宜直接嵌入内用实现；需添加aria-live="polite"、tabindex="-1"并聚焦，配合opacity/visibility控制显隐，SSR时仅输出骨架，客户端统一判定空状态。
空状态该用什么 HTML 元素包裹
空状态不是随便套个 <div> 就完事。语义错误会导致屏幕阅读器误读、SEO 权重稀释，甚至影响后续 CSS 作用域。推荐用 <code><section></section> 或带 role="region" 的 <div>，避免用 <code><span></span> 或无意义的嵌套 <div>。
<p>如果空状态是列表容器（比如 <code><ul></ul>）的 fallback，直接在容器内渲染空提示更稳妥——不破坏 DOM 结构层级，也省去额外的 JS 判断容器是否为空再切换显示逻辑。
- ✅ 正确：
<ul class="list"><li class="empty-state">暂无数据</li></ul> - ❌ 风险：
<div class="list-wrapper"> <ul class="list"></ul> <div class="empty-tip">…</div> </div>（需 JS 控制显隐，且空时<ul></ul>仍存在）
如何让空状态真正“可访问”
仅靠视觉提示（比如灰色文字+图标）对视障用户无效。必须结合 ARIA 属性和焦点管理。
- 给空状态容器加
aria-live="polite"，确保动态插入时能被读屏软件捕获 - 若空状态由 JS 触发（如接口返回
[]），插入后立即调用element.focus()（前提是该元素已设tabindex="-1"） - 避免仅用颜色表达“空”——比如红色“加载失败”和灰色“暂无数据”在色觉障碍下难区分，要搭配图标或文字明确语义
常见错误：<div class="empty">没有内容</div> —— 缺少 role 和 aria-live，读屏器可能跳过或误读为普通段落。
立即学习“前端免费学习笔记（深入）”；
CSS 控制空状态显隐的边界条件
用 display: none 隐藏空状态最简单，但会彻底移除渲染流，导致动画、过渡、焦点恢复失效。更健壮的做法是组合使用 visibility: hidden + pointer-events: none + opacity: 0，再配合 transition 实现淡入淡出。
- 当空状态需支持动画入场：用
opacity+transform，而非display - 当空状态含可操作按钮（如“重试”），隐藏时必须同时禁用交互：
pointer-events: none不可省略 - 注意：
visibility: hidden仍占布局空间，若父容器高度依赖子元素（如 flex 自适应），需额外设置height: 0或min-height: 0
服务端渲染（SSR）与客户端空状态的冲突点
服务端已渲染出空状态，但客户端 hydration 后数据立刻就位，会造成闪屏或状态错乱。关键不是“谁先画”，而是“谁负责判定”。统一交给客户端判断更可控。
- 服务端只输出骨架结构（如
<ul class="list"></ul>），不预渲染空提示 - 客户端首次 render 时检查数据长度，再决定是否插入
<li class="empty-state"> - 若使用 React/Vue，务必在
useEffect或onMounted中触发空状态判定，避免 SSR 与 CSR 状态不一致引发 Hydration Warning
最容易被忽略的是 loading 状态的衔接：接口未返回前，应展示 loading 骨架；返回空数组后，才切换到空状态。两者不能共存，也不能跳过 loading 直接进 empty —— 用户会以为卡死。
