Kuma，生成 MDN 网站的代码，融合了旧与新。 MDN 在 2015 年迎来了十周年，从最初的日子里留下了不少代码和内容。 当我坐下来开始编写当前的重构代码时，我做的第一件事就是 移除最后几个上次重构的痕迹。 与此相反，我们拥有一个领先的用户群体：92% 的用户拥有支持 CSS 网格的浏览器！ 我们启用了 http2，并且 98% 的用户从中受益。

在 kuma 中处理旧代码的一种方法是使用营地规则：永远要比你找到时把营地打扫得更干净。 重构会影响很多文件，这是一个清理和重构的好机会——至少在最后期限到来之前是这样的。

重构也是一个改变你害怕破坏的东西的好时机。 人们更能理解你将新事物中的 bug 修复掉，而不是破坏一个已经工作了多年的东西。 在重构期间，我删除了 640 行陈旧的代码。（如果你通过删除自定义列表样式，破坏了六年前你每天使用的 XPCOM 教程，请 提交 bug！）

一个网站，两种外观

我们没有在单独的“重构”文件夹中处理重构的 CSS，而是复制了所有文件，并在旧文件的名称中添加了“-old”，这意味着我们所有的重构工作都在“官方”文件中进行。 这样保留了 git 历史记录，并且意味着我们不需要在发布后移动任何东西。 一旦我们对代码感到满意，就可以放心地删除“-old”文件。

为了向我们的 beta 测试人员提供新的样式，向其他所有人提供“-old”样式，我们使用 Django Waffle。 Waffle 也可以用来提供不同的内容，但是由于 MDN 在表示和内容之间有很强的分离，所以我们对 HTML 做了很少的改动。

beta 测试人员发现的 bug

MDN 非常大，我们不可能测试每个页面和每个语言环境。 我们很幸运有活跃的 beta 测试人员。:) 他们发现的一些最主要的问题是

突出显示

我们一开始是通过使用 Zilla Slab Highlight 字体来复制 Mozilla 的品牌“突出显示”效果，但当在许多 语言环境 中出现问题，并且与内联代码结合使用时，我们很快就放弃了这种做法。

当前的方法默认情况下在 h3 和 h4 标题上放置一个全宽黑色背景，然后一些 JavaScript 代码运行以添加一个<span> 标签，以便黑色背景紧贴标题文本。 这是渐进增强的体现。

我们来来回回讨论了这个问题，想知道 JavaScript 和额外的<span> 是否值得付出这些努力。 但我们坚持使用它，因为它让 h3 和 h4 标题在浏览页面时更容易发现。

台湾话里 Slab Serif 怎么说？

以前，我们使用 Open Sans 作为我们的标题文本。 在重构中，我们切换到了 Zilla Slab。 Open Sans 很薄，并且是字体中的平均高度。 它与中文或日文字符的系统回退放在一起并不显眼。

Zilla 很粗很厚，我们开始收到关于它与这些系统回退的对比度的反馈。 此外，目前 Zilla 的字符集仅限于欧洲拉丁语，因此越南语，它使用拉丁字符加上几个欧洲没有使用的拉丁字符，在 单词中间显示字体回退。

为了解决这两个问题，我们实施了一个系统，允许我们 按语言环境覆盖网站字体。（如果你想单独写一篇关于这个的博客文章，请留言。）

对比度

我们收到了很多关于旧设计低对比度显示的抱怨。 我们在这个设计中稍微过了一点，收到了关于高对比度的抱怨。 我们已经将其调低到很受欢迎的#333。

下一步

我们正在继续进行这个项目，对文章页面进行一些具体的改进

• 将代码示例置于页面顶部；我们勤劳的作者和志愿者正在逐页进行这项工作。
• 一种更好的可读行长和宽代码示例的方法，灵感来自 Hacks 博客主题。
• 并排显示桌面和移动设备数据的兼容性表格。
• 可以在页面中实验的代码示例。

通过 注册成为 beta 测试人员，你可以提前看到这些内容。

你喜欢 MDN 的 beta 测试吗？ 你也可以 通过下载 Nightly 来 beta 测试 Firefox。

谁是“我们”？

MDN 开发团队是

• Stephanie Hobson，也就是我，CSS-Pre-Pre-Processor
• Schalk Neethling，他在所有浏览器中审查了我 30 多个拉取请求，有时会审查多次
• John Whitlock，他完成了很棒的 语言环境回退
• Ryan Johnson，当我和 John 说有些事情做不到时，他总是问“为什么不呢？”。

我们在 Mozilla 营销工程和运营博客 上偶尔会发帖。

你还可以阅读我们产品经理 Kadir Topal 关于 MDN 的未来 的这篇博客文章。