扁平化设计关键在结构克制、视觉降噪、语义清晰三者缺一不可；需用html语义标签替代冗余div、禁用拟物化css样式、压缩表头层级、避免隐性容器泛滥。
扁平设计不是靠删阴影就完事，关键在结构克制、视觉降噪、语义清晰——三者缺一不可。
HTML语义标签怎么选才不破坏扁平感
用 <div> 套 <code><div> 再套 <code><div> 是扁平化的最大敌人。浏览器渲染时 DOM 层级越深，重排重绘成本越高，辅助技术也越难解析。<ul><li>直接用 <code><header></header> 替代 <div class="header">，不加额外 wrapper<li>
<code><main></main> 必须且只能出现一次，它就是页面主体的语义边界，别再给它包个 container
<section></section> 和 <article></article> 按内容逻辑切分，不是按视觉区块切分；一个 <section></section> 里嵌三层 <div> 就等于把扁平写成了浮雕<li>避免 <code><nav></nav> 外再套 <div class="nav-wrapper"> —— flex 布局可以直接写在 <code><nav></nav> 上CSS按钮/表单控件怎么实现真扁平
“扁平”常被误解为“没样式”，其实是指去除拟物化干扰（如内阴影、高光、立体边框），但保留明确的交互反馈和视觉层级。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
button元素禁用text-shadow、box-shadow（除 hover/focus 状态下轻量提示外） - 边框统一用
1px solid #ccc或完全透明，别用2px outset这类拟物属性 - 圆角控制在
2px–4px，border-radius: 0更激进但需全站一致 -
input[type="text"]和select的默认 outline 在 focus 时保留，但用outline-offset: 2px避免“跳动” - 禁用
appearance: none后未重置background和border，会导致 Safari 下按钮消失
表格复杂表头怎么扁平化而不丢信息
多层 <th rowspan="2"> + <code><th colspan="3"> 看似结构清晰，实则语义混乱、响应式崩坏、屏幕阅读器难以线性读取。<ul><li>把嵌套表头压缩成单行 <code><thead><tr>，列名用简明短语（如 “Q3 收入” 而非 “财务数据 > 季度汇总 > 第三季度 > 总收入”）<li>原跨列信息改用 <code>data-* 属性保留在 <th> 上，供 JS 或 ARIA 扩展使用<li>必要时用 <code><abbr title="Quarter 3 Revenue">Q3 Rev</abbr> 提供完整语义，不影响视觉扁平
display: none + aria-hidden="true"），比强行压缩表头更可靠为什么用了 Flex/Grid 还是感觉“不扁平”
布局工具只是手段，真正卡住扁平落地的是「隐性容器泛滥」——开发者习惯用布局容器兜底，结果语义退化、DOM 膨胀、CSS 选择器越来越长。
- 检查是否每个
<div> 都有明确职责：是语义缺失被迫加的？还是仅为 margin/padding 临时包裹？后者一律删掉<li>React/Vue 中慎用无意义 wrapper 组件，<code><fragment></fragment>或>应该是默认选项 - CSS 里少用
.wrapper .inner .content > p，改用main > p或article p直接命中语义节点 - Lighthouse 的 “DOM depth” 指标超过 12 层，基本可判定结构已偏离扁平原则
扁平不是删减，是筛选：删掉所有不能回答“这个标签为什么存在”的节点，留下每个都承担明确语义或功能的元素。最易忽略的，其实是那些没写 class、没加 JS、看起来“什么都没干”的空 <div> —— 它们才是扁平化真正的绊脚石。</div>
