应使用 article 和 section 构建语义化结构，配合 CSS Grid 实现响应式布局，利用 :is() 简化样式复用，并在列表页仅渲染摘要以提升加载性能。
用 article 和 section 搭建语义化结构
浏览器和读屏工具依赖 HTML 语义标签理解内容层级。别用一堆 div 堆砌列表，直接用 article 包每篇文章，外层用 section 或 main 标明主体区域。这样既利于 SEO，也方便后续用 CSS 选择器精准控制样式。
常见错误是把标题、摘要、元信息全塞进一个 div，结果样式一改就全乱。正确结构示例：
<main>
<article>
<header>
<h2><a href="/post/1">如何调试 React Suspense</a></h2>
<p class="meta"><time datetime="2024-05-12">5月12日</time> • 8 分钟阅读</p>
</header>
<p class="excerpt">Suspense 触发时没有 fallback？useTransition 不生效？本文直击三个典型断点…</p>
<footer><a href="/post/1">阅读全文 →</a></footer>
</article>
<!-- 更多 article -->
</main>用 grid 实现响应式三栏到单栏切换
纯靠 float 或 inline-block 排版博客列表，移动端适配会反复踩坑。CSS Grid 能用几行代码搞定断点切换：桌面端三列等宽，平板两列，手机强制单列。
关键点不是“怎么写 Grid”，而是避免漏掉 gap 和 minmax 的组合：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 确保最小宽度不压缩文字，又能在窄屏自动回退为 1 列 - 必须设
gap: 1.5rem，否则文章卡片紧贴，视觉拥挤 - 别给
article设固定高度，摘要长度不一，强制高度会截断文字或留白失控
补充一句：如果要兼容 IE，就别碰 Grid，老实用 flex + @media，但得手动处理换行逻辑。
用 :is() 简化标题和元信息的样式复用
每篇博客的标题链接、时间、分类、阅读时长往往需要统一字体大小、颜色和间距。手写三遍 article h2 a、article .meta time、article .meta span 太冗余，且后期改色要改多处。
现代 CSS 的 :is() 是解法：
article :is(h2 a, .meta time, .meta span) {
color: #4a5568;
font-size: 0.95rem;
}注意两点：
-
:is()不支持伪元素（比如不能写:is(a:hover)），hover 得单独写 - 某些旧版 Safari 对
:is()解析有 bug，若需强兼容，退回到类名统一样式（如加text-muted）
加载性能陷阱：别在列表页预渲染全文
看到别人博客列表里每篇文章都带完整 Markdown 渲染结果，就跟着把 <p></p>、<ul></ul>、<code> 全塞进去——这是最常被忽略的性能雷区。
列表页只需展示摘要，且必须满足：
- 摘要截断严格按字符数或段落数，而非简单
substring(0, 200)，否则可能切在 HTML 标签中间，导致后续 DOM 错位 - 禁用所有内联样式和脚本（比如摘要里带
<script></script>或onclick），防止 XSS 和执行开销 - 图片一律用占位符或懒加载
loading="lazy"，否则首屏加载几十张缩略图会卡死滚动
真正复杂的格式（表格、代码块、数学公式）只应在详情页解析。列表页越轻，用户划动越顺，服务器吐数据越快。
