商品管理列表应使用语义化HTML结构：用section包裹分类并设id和h2，article表示独立商品，dl展示键值对参数；筛选依赖data-属性与.hidden类，响应式采用auto-fit网格布局，并添加图片懒加载优化性能。
商品管理列表不是“堆一堆 div 再加 CSS 排版”就能凑合用的，它得支撑筛选、批量操作、状态标记、响应式缩放和未来可能的导出/编辑入口——布局结构一旦松散，后面加功能全是补丁。
用 section + article 划分区块和单品
别把所有商品塞进一个 div class="product-list"。每个一级分类（比如「手机」「配件」）用 section 包裹，并带 id 和 h2：
<section id="phone"><h2>手机</h2> <article data-category="phone" data-status="on-sale">…</article><article data-category="phone" data-status="draft">…</article></section>
原因很实在：section 支持锚点跳转（#phone）、被屏幕阅读器识别为独立内容区、CSS 可按区块设断点；article 表明每个商品是可独立索引/分享/复用的单元，比 div 或 li 更准确。常见错误是靠 class 名模拟结构，比如 div.category-phone，结果 JS 筛选时得解析字符串，还容易撞名。
商品项内用 dl 结构化参数，不用 table 或嵌套 div
商品卡片里要展示「品牌：Apple」「内存：256GB」「上架时间：2026-10-15」这类键值对？直接用 dl：
<article><figure>@@##@@</figure><dl>
<dt>品牌</dt>
<dd>Apple</dd>
<dt>SKU</dt>
<dd>A15P-256B</dd>
<dt>状态</dt>
<dd><span class="status on-sale">已上架</span></dd>
</dl></article>
dl 是 HTML5 明确为“术语-描述”关系设计的，语义干净、IE8+ 全支持、CSS 控制 display 也灵活（display: grid 或 flex 都行）。硬伤是有人用 table 套参数——小屏必须横向滚动，爬虫抓不到字段含义；也有人写满 div.item-label + div.item-value，纯靠 class 维护，后期改字段名就得全盘搜索替换。
筛选和显隐必须靠 data- 属性 + .hidden 类
筛选逻辑别碰 class 或 id，只读 data-category 和 data-status：
- JS 查询写
document.querySelectorAll('[data-category="phone"][data-status="on-sale"]')，不拼字符串也不正则匹配 - 隐藏商品别改
style.display = 'none'——它会覆盖原有 display 值（比如原本是inline-block，一隐藏再显示就变block错行） - 统一用
.hidden { opacity: 0; pointer-events: none; transition: opacity 0.2s; }，显隐平滑且不影响布局流
多条件筛选的状态存数组，比如 const activeFilters = ['phone', 'on-sale']，而不是写死 if/else。加新分类不用动 JS，只改数据属性就行。
响应式网格用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
商品列表在后台页面常需从桌面宽屏缩到 iPad 横屏，固定列数（如 repeat(4, 1fr)）在小屏直接溢出。正确写法：
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
关键点：auto-fit 让浏览器自动计算能放几列，minmax(280px, 1fr) 保证每项最小 280px、大屏时均分剩余空间。容器本身要设 max-width: 1200px 和 margin: 0 auto 居中。别漏掉 gap——它比 margin 可靠，不会因首尾元素合并空白而错位。
真正容易被忽略的是：后台列表常有上百条数据，但没人记得给图片加 loading="lazy" 或用 IntersectionObserver 控制渲染节奏，一拉到底卡顿半天，还以为是接口慢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
