合理隐藏冗余元素需先判断是否应删除而非隐藏：结构冗余元素（如空div、clearfix）应直接删除；必须隐藏时优先清空资源属性、调用remove()或使用hidden属性；表格须同步隐藏th与td；动画场景宜用opacity+visibility组合。
在响应式设计中，合理隐藏冗余元素不是简单加 display: none 就完事，关键在于“该不该删、能不能删、怎么删才不翻车”。盲目隐藏容易破坏语义、干扰可访问性、引发布局错乱，甚至拖慢页面性能。
优先判断：这个元素真需要隐藏，还是该直接删除？
很多所谓“冗余”其实是结构冗余，比如连续两层空 <div> 包着一个 <p>，或仅用来清除浮动的 <div class="clearfix">。这类元素没 class、没 id、没样式、没 JS 绑定，用开发者工具悬停就能识别——直接删掉，比隐藏更干净。
- 删掉仅起“撑高”作用的空
<div>，改用min-height或padding - 删掉纯为
class="clearfix"存在的容器，改用overflow: hidden或伪元素清除浮动 - 用语义化标签（如
<header>、<aside>）替代无意义的<div>，既减少嵌套又提升可读性
必须隐藏时，别只靠 display: none
对确实要保留 DOM 结构但小屏下不用的内容（如桌面端侧边栏、旧版轮播图、冗余表头列），display: none 虽快，但有隐患：含 iframe、video 或第三方脚本的模块仍会加载资源；若模块由 JS 动态插入，仅视觉隐藏可能让初始化逻辑白跑。
- 含
src、data-src的元素，先清空属性再隐藏 - JS 动态创建的模块，优先调用
remove()或注释掉初始化代码 - 用原生
hidden属性替代内联style="display: none"，语义更明确，且对屏幕阅读器友好（Chrome 23+/Firefox 22+/Edge 12+/Safari 6.1+ 均支持）
表格类复杂结构，禁用“选择性隐藏单元格”
响应式表格最常见错误，就是用媒体查询单独隐藏某些 <td> 却不处理对应 <th>。这会导致表头与数据列数不一致，浏览器自动补空或压缩列宽，结果不可控。
立即学习“前端免费学习笔记（深入）”；
- 统一用
data-column="xxx"标记整列，避免依赖:nth-child() - 切换显隐时，用同一组选择器同时命中
<th>和所有对应<td> - ≥4 列时，推荐
data-label堆叠方案：每行转为独立区块，<td data-label="下单时间">2026-07-28</td>，配合::before { content: attr(data-label); }插入标签，体验更清晰
动画与交互场景，opacity + visibility 才稳妥
要做淡入淡出效果时，display: none 不支持 CSS 过渡，硬切会卡顿。而 opacity: 0 单独用又保留交互能力，用户可能误点已“透明”的按钮。
- 组合使用：
opacity: 0; visibility: hidden; pointer-events: none; tabindex="-1" - 展开/收起类交互，可用
height: 0; overflow: hidden;配合transition: height 0.3s ease，比单纯隐藏更自然 - 表单校验失败后临时隐藏某个输入框，仍建议用
display: none，避免visibility: hidden导致 tab 键还能聚焦到它
