空状态必须复用真实内容容器的语义标签、盒模型和ARIA属性，如<ul class="order-list" aria-live="polite">；构成独立功能区块（含标题、筛选等）用<section>，孤立提示用带role="region"的<div>。
空状态占位符不是“加个提示就行”，它必须和真实内容容器共享语义、盒模型与可访问性上下文，否则在异步渲染中会触发 DOM 抖动、读屏器跳过、键盘焦点丢失、SSR 与客户端状态错乱。
空状态该用 <section> 还是 <div>？看它是否构成独立功能区块
如果空提示属于某个明确上下文（比如“订单列表区”“搜索结果区”），且上方有 <h2> 标题、旁边有筛选控件，就该用 <section> —— 它天然表达“一个逻辑区块”，屏幕阅读器会把它当独立导航单元处理。
但如果只是表格下方一行文字，或卡片网格里某列临时没数据，用带 role="region" 的 <div> 更稳妥。滥用 <section> 会导致结构层级膨胀，读屏器反复播报“区域开始/结束”，干扰用户。
- 真实内容是
<ul class="order-list"></ul>→ 空状态也用<ul class="order-list" aria-live="polite" aria-label="订单列表为空">暂无订单记录</ul></li> <li>真实结构是 <code><div class="card-grid"></div>
→ 空状态必须是<div class="card-grid" aria-live="polite">暂无内容</div></li> <li>不要新建 <code><div class="empty-state">
—— 它脱离语义链，CSS 盒模型不一致，flex/grid 布局中容易错位
aria-live="polite" 必须加在容器上，不能只加在文案里
只给 <p> 加 aria-label 或 role="alert" 没用：屏幕阅读器不会主动播报，除非容器本身具备实时感知能力。
立即学习“前端免费学习笔记（深入）”；
正确做法是把 aria-live="polite" 和 role="status" 同时加在复用的真实容器上。它保证数据加载完成、JS 插入空提示后，读屏器自动读出文案，且不打断当前语音流。
- 避免
aria-live="assertive"—— 它会强行中断用户正在听的内容，体验突兀 - 不要用
display: none隐藏整个空容器 —— 这会让读屏器彻底忽略它；应该由 JS 控制节点挂载/卸载 - SSR 渲染时，若已知为空，可直接输出带
aria-live的容器；否则客户端检测后动态插入，用content.cloneNode(true)而非innerHTML，防 XSS 和事件丢失
空状态文案结构必须含三要素：状态说明 + 原因提示 + 可操作入口
“暂无数据”四个字是无效提示。用户需要知道「现在什么情况」「为什么这样」「接下来能做什么」。
状态说明用 <strong> 或 <h3>，控制在 8 字内；原因提示用 <p>，避开技术术语；操作入口必须是原生 <button> 或 <a>，禁用 <div onclick>。
- 搜索为空 →
<strong>未找到匹配项</strong>+<p>请检查关键词拼写，或尝试其他搜索词</p>+<button>清除搜索条件</button> - 权限不足 →
<strong>暂无查看权限</strong>+<p>请联系管理员开通「订单管理」权限</p>+<a href="/settings/roles">前往权限设置</a> - 网络失败 →
<strong>加载失败</strong>+<p>当前网络不稳定，请稍后重试</p>+<button onclick="retryLoad()">重新加载</button>
骨架屏和空状态不能共用同一套 DOM 结构
骨架屏是加载过程中的视觉占位，空状态是数据确定为空后的语义反馈。两者目的、生命周期、可访问性要求完全不同。
骨架屏必须用独立的语义空元素（如 <div class="skeleton-item"></div>）构建，不能复用 <ul class="order-list"> —— 否则 JS 替换内容时易错乱，CSS 动画污染真实样式，SSR 注入还会导致水合错误。
- 骨架屏用 CSS 渐变背景 +
animation模拟流光，加载完成立刻remove()整个骨架节点 - 空状态由 JS 在数据返回后判定是否为空，再决定挂载哪套结构（骨架 → 真实内容 → 空状态）
- 三者切换必须原子化：一次 DOM 更新完成状态切换，避免中间态闪现或布局抖动
最常被忽略的点是：空状态容器的盒模型必须和真实内容完全一致——padding、margin、border、grid-template-columns 全部继承自同一 class。哪怕只差 1px，异步切换时页面就会跳一下，用户感知就是“卡顿”。这不是样式问题，是语义与布局对齐失效的连锁反应。
