100 字节的 CSS 让网站在任何地方都看起来很棒

100 字节的 CSS 几乎可以在任何地方看起来都很棒

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

我之前在推特上发布了这个旧版本的代码，并意外地获得了 10 万人的逐行代码审查：

本文是根据大家的反馈而更新的版本。

Dan Luu 总是写出引人入胜的帖子，但其设计却让人读起来很痛苦：

几年前，HN 上的这篇文章相当受欢迎，我将其保存在我的spark-joy repo中，这是我过去几年收集的设计技巧的滑动文件。

然而，我发现原来的网站链接已经失效了。所以我想用我现在为Dan的网站实现的方法刷新一下：

这应该是简单的嵌入式 CSS，在大多数显示器上看起来不错：

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

让我们来分析一下。我根据原文做了一些调整，并添加了我自己的评论。

max-width: 70ch：“可读范围”通常为 60-80 个字符宽度，CSS 允许你直接用ch单位来表达。我去年写了更多关于行长度的博客。
padding: 3em 1em：如果显示屏宽度低于max-width上述设置，则此填充会阻止移动设备上的文本边缘到边缘显示。我们使用它3em来提供顶部/底部的空白。
margin: auto：这实际上就是将页面居中所需的全部内容——应用于html，因为Dan的网站没有语义<main>标签，而且<html>大多数网站都更可能存在语义标签（请不要评判，我已经听够了语义HTML的说教）。顶部标签相对于任何内容居中，这很不直观，但浏览器就是这样做的。
line-height: 1.75：行间距有助于提高视觉清晰度。出于某些原因，请始终保持行高无单位。
font-size: 1.5em：我注意到最近的设计趋势和屏幕尺寸都倾向于使用更大的字体。或许是我年纪大了。如果你想让用户缩放字体，最好使用em或。rempx

Tushar 指出，您可以使用:root而不是<html>来保证存在某个选择器，但对我来说这有点太花哨了，而且使用了一个额外的字符:)

如果您可以节省几个额外的 CSS 字节，我还建议为标题、段落和列表添加边距，并软化正文：

h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}