每当我设计我的网站时，我都会尽量保持简单。我这样做是因为存在无数的设备、互联网速度和可访问性需求。
正因为如此，我总是尝试遵守以下规则：
- 切勿导入外部字体、样式或脚本；
- 确保有良好的对比度；
- 有良好的排版。
正如我在Booksite 或受书籍启发的网站中所说，
并非每个人都有良好的互联网连接[,]
因此，人们唯一需要加载额外数据的时间将保留给我想要嵌入到我的博客文章中的图像或其他内容。
例如本文转：
- 8kB 文本；
- 2kB 的代码突出显示样式；
- 80kB 图像数据。请注意，这只是一张 .webp 格式的图像，这非常有效。
不仅如此，如果您使用 bearblog 的默认主题，您可能会加载一个大小约为 50kB 的字体。
换个角度来看，如果网速较差的用户加载该页面需要 1 秒，那么他们将不得不再等待 6 秒才能加载字体。那时，他们可能已经阅读了一两段，然后你突然改变了他们的文本外观，这不是一个好的体验。
图像是相同的，但它们可以在用户阅读您的帖子时加载，所以这不是一个大问题。但是，您应该始终压缩图像。
Dan Luu对网络膨胀的分析揭示了一个事实：并非每个人都能平等地访问互联网：
当我在谷歌工作时，有人告诉我一个故事，有一次“他们”完成了一次大规模的优化，却发现测得的页面加载时间增加了。当他们深入研究数据时，他们发现加载时间增加的原因是在进行优化后，他们从非洲获得了更多的流量。该团队的产品从对连接速度慢的人无法使用变为可用，这导致许多连接速度慢的用户开始使用该产品，导致加载时间实际上增加了。
所以，不幸的是，我会坚持使用 Arial。已经足够好了。
对比度是另一个问题。有些人使用对比度差的颜色，因此您无法轻松阅读文本。我不会在这里详细介绍，但很明显，白底黑字文本总是效果很好。
版式是使博客更易于访问的另一个重要方面。它是呈现文本内容的视觉语言，也应该是焦点。我建议阅读 Matthew Butterick 的《实用版式》一书，它是免费的，教您了解版式基础知识所需的一切。再次强调，我不会在这里详细介绍，但我会补充一点，为了方便起见，我违反了一些规则（例如，我应该使用弯引号而不是直引号）。
CSS 代码
这是完整的 CSS 样式：
:root { --width: 720px; --font-main: Arial, sans-serif; --font-secondary: Arial, sans-serif; --font-scale: 1.1em; --background-color: #f3f3f1; --heading-color: #13080f; --text-color: #13080f; --link-color: #13080f; --visited-color: #13080f; --code-background-color: #13080f; --code-color: #f3f3f1; --blockquote-color: #13080f; } body { font-family: var(--font-secondary); font-size: var(--font-scale); text-align: left; background-color: var(--background-color); word-wrap: break-word; overflow-wrap: break-word; line-height: 1.5; color: var(--text-color); margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); color: var(--heading-color); } a { color: var(--link-color); cursor: pointer; text-decoration: underline; } nav a { margin-right: 8px; } header { padding-bottom: 0px; margin-bottom: 30px; max-width: var(--width); margin-right: auto; margin-left: auto; padding-left: 20px; padding-right: 20px; } strong, b { color: var(--heading-color); } button { margin: 0; cursor: pointer; } main { line-height: 1.6; max-width: var(--width); margin: auto; padding-left: 20px; padding-right: 20px; } table { width: 100%; } hr { border: 0; border-top: 1px dashed; } img { max-width: 100%; } code { font-family: monospace; padding: 2px; background-color: var(--code-background-color); color: var(--code-color); border-radius: 3px; } blockquote { color: var(--blockquote-color); } footer { margin-top: 40px; padding-bottom: 40px !important; padding-top: 40px !important; margin-right: auto; margin-left: auto; background: #000; color: var(--background-color); } footer a { color: var(--background-color); } .title:hover { text-decoration: none; } .title { text-decoration: none !important; } .title h1 { font-size: 2em; } .inline { width: auto !important; } .highlight, .code { padding: 1px 15px; background-color: var(--code-background-color); color: var(--code-color); border-radius: 3px; margin-block-start: 1em; margin-block-end: 1em; overflow-x: auto; } /* blog post list */ ul.blog-posts { list-style-type: none; padding: unset; } ul.blog-posts li { display: flex; } i time { font-style: normal; opacity: 0.7; } ul.blog-posts li span { flex: 0 0 130px; } ul.blog-posts li a:visited { color: var(--visited-color); } table { border-spacing: 0; } th, td { padding: 6px 13px; border: 1px solid #dfe2e5; font-size: 1em; } #stars { overflow:hidden; line-height:1; margin-bottom:40px; margin-top: 0; } footer span { display:block; max-width: var(--width); margin-right: auto; margin-left: auto; padding-left: 20px; padding-right: 20px; }
原文： https://extremq.com/my-minimalist-theme-for-bearblog-and-why-i-use-it/