应使用section和article构建语义化商品结构：一级分类用带id的section，单品用article；图文用figure/figcaption，参数用dl；布局用grid+gap；图片防抖用aspect-ratio或宽高属性；筛选靠data-category属性。
用 section 和 article 搭建语义化商品结构
别用一堆 div 堆商品列表——它既不利于 SEO，也拖慢后期筛选和无障碍访问。每个一级分类（比如「手机」「耳机」）必须包裹在 section 里，并带 id（如 id="phone"），这样能支持锚点跳转、CSS 按区块控制样式，也方便 JS 精准定位。
每个单品必须用 article，不是 div 或 li。原因很实际：article 表示独立可复用的内容单元，能被 RSS 订阅、被搜索引擎单独索引；而 li 暗含顺序依赖，div 则完全无语义。
-
article内部推荐嵌套figure+figcaption放主图和标题价格，比纯img+h3更结构化 - 规格参数（如品牌、内存、接口）用
dl而非多个p，便于屏幕阅读器解析 - 避免把分类信息塞进
class（如class="product phone new"），JS 查询时容易误匹配
用 grid 实现响应式多列布局，而不是 float 或 table
现代电商列表首选 display: grid，尤其适合等宽自适应栅格。核心写法是 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))：最小列宽 280px，容器够宽就自动加列，不够就回退为单列。
别用 float 布局商品——它需要清除浮动、易塌陷、响应式难调；更别碰 table——语义错误、可访问性差、移动端几乎无法适配。
立即学习“前端免费学习笔记（深入）”；
- 行间距统一用
gap: 16px，比给每个article加margin-bottom更可靠（避开 margin 合并问题） - 图片高度不一致？加
img { height: 180px; object-fit: cover; }防拉伸变形 - IE11 不支持
auto-fill和minmax()，需 fallback 到flex-wrap+flex-basis
图片加载防抖动：提前占位比等加载更关键
商品图异步加载时，img 高度为 0，卡片突然塌陷，用户正在滚动就会“跳帧”——这不是 CSS 能修的，得从 HTML 结构入手。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
最稳妥的占位方式是给 article 设 aspect-ratio: 3/4（Chrome 103+、Firefox 98+ 支持），老浏览器 fallback 用伪元素：
article::before {
content: "";
display: block;
padding-top: 133%; /* 4:3 ≈ 133% */
}再把图片设为 position: absolute 填满容器。或者更简单粗暴：直接在 img 标签上写 width="300" height="400"，浏览器会按比例预留空间。
- 别依赖 JS 监听
load后再显示卡片——延迟明显，体验断层 - 慎用
loading="lazy"配合无限滚动——首次加载可能漏掉首屏图片 - 服务端返回图片尺寸信息，前端渲染时直接注入
width/height属性，是最可控的方式
筛选逻辑绑定 data-category，显隐靠 .hidden 类
筛选唯一可信源是 data-category 属性，比如 <article data-category="phone">。JS 用 document.querySelectorAll('[data-category="phone"]') 取数，干净、单一、可预测。
千万别把分类存在 class 或 id 里：前者易误匹配（.phone 会命中 phone-pro），后者解析字符串脆弱（id="prod-123-phone" 需正则提取）。
- 显隐控制必须走 CSS 类，比如
.hidden { opacity: 0; pointer-events: none; transition: opacity 0.2s; } - 别直接改
style.display——会覆盖原有display值（如inline-block变成block导致错行） - 筛选状态建议存数组而非 DOM 属性，避免多次读写影响性能
真实项目里，最难的不是写出能排四列的 CSS，而是让每张卡片在不同网络、不同设备、不同加载时机下都保持视觉稳定。结构语义、占位策略、数据绑定这三块，任一环节松动，都会在放大流量后暴露成体验断点。
