把复杂的事，写成简单的代码

本文为 mieka 博客的原创示例内容，可替换为自己的文章。

一个页面看起来简单，背后往往有许多选择。布局的边界怎么处理，长标题会不会撑开卡片，窄屏时哪些信息应该先出现，这些小问题决定了使用起来是否顺手。

从内容出发

假设我们要放置一组文章卡片。与其先写一堆设备断点，不如让浏览器根据容器的宽度决定列数。

css

.article-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 18rem), 1fr)
  );
  gap: 1.25rem;
}

这里的 min() 让最小列宽不会超过容器。屏幕变窄时，卡片仍然可以完整放下；空间变大时，它们再自然地排成多列。

现实中的内容不会总是刚好合适。代码块可能很长，链接可能没有空格，标题也可能比设计稿多出一倍。

css

.article-body { overflow-wrap: anywhere; }
.article-body pre { overflow-x: auto; }
.article-card { min-width: 0; }

这几行并不引人注目，却能解决很多横向溢出。比起隐藏内容，我更愿意让代码块保留自己的滚动区域。

搜索和主题切换需要 JavaScript，但正文和导航可以直接写在 HTML 中。脚本加载失败时，读者仍然能把文章读完。

减少代码之前，先明确每一层负责什么。布局决定空间，排版照顾文字，交互回应动作。边界清楚以后，代码通常也会变得更容易修改。