空状态必须复用真实内容容器的语义标签、盒模型和aria属性，如；构成独立功能区块（含标题、筛选等）用，孤立提示用带role="region"的。
空状态占位符不是“加个提示就行”，它必须和真实内容容器共享语义、盒模型与可访问性上下文，否则在异步渲染中会触发 DOM 抖动、读屏器跳过、键盘焦点丢失、SSR 与客户端状态错乱。
空状态该用 <section></section> 还是 <div>？看它是否构成独立功能区块
<p>如果空提示属于某个明确上下文（比如“订单列表区”“搜索结果区”），且上方有 <code><h2></h2> 标题、旁边有筛选控件，就该用 <section></section> —— 它天然表达“一个逻辑区块”，屏幕阅读器会把它当独立导航单元处理。
但如果只是表格下方一行文字，或卡片网格里某列临时没数据，用带 role="region" 的 <div> 更稳妥。滥用 <code><section></section> 会导致结构层级膨胀，读屏器反复播报“区域开始/结束”，干扰用户。
- 真实内容是
<ul class="order-list"></ul>→ 空状态也用- 暂无订单记录
- 真实结构是
<div class="card-grid"></div> → 空状态必须是 <pre class="brush:php;toolbar:false;"><div class="card-grid" aria-live="polite">暂无内容</div></pre> - 不要新建
<div class="empty-state"> —— 它脱离语义链，CSS 盒模型不一致，flex/grid 布局中容易错位 <h3> <code>aria-live="polite"必须加在容器上，不能只加在文案里只给
<p></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></strong>或<h3></h3>，控制在 8 字内；原因提示用<p></p>，避开技术术语；操作入口必须是原生<button></button>或@#@#@#@#@#@#@#@#@#@0 - 避免
- 网络失败 →
<strong></strong>加载失败+<p></p>当前网络不稳定，请稍后重试+<button onclick="retryLoad()"></button>重新加载 - 骨架屏用 CSS 渐变背景 +
animation模拟流光，加载完成立刻remove()整个骨架节点 - 空状态由 JS 在数据返回后判定是否为空，再决定挂载哪套结构（骨架 → 真实内容 → 空状态）
- 三者切换必须原子化：一次 DOM 更新完成状态切换，避免中间态闪现或布局抖动
骨架屏和空状态不能共用同一套 DOM 结构
骨架屏是加载过程中的视觉占位，空状态是数据确定为空后的语义反馈。两者目的、生命周期、可访问性要求完全不同。
骨架屏必须用独立的语义空元素（如 <div class="skeleton-item"></div>）构建，不能复用 <ul class="order-list"></ul> —— 否则 JS 替换内容时易错乱，CSS 动画污染真实样式，SSR 注入还会导致水合错误。
最常被忽略的点是：空状态容器的盒模型必须和真实内容完全一致——padding、margin、border、grid-template-columns 全部继承自同一 class。哪怕只差 1px，异步切换时页面就会跳一下，用户感知就是“卡顿”。这不是样式问题，是语义与布局对齐失效的连锁反应。
