设计系统：为未来而建

现代网页设计和开发过程正在迅速发展，响应式网站正迅速成为主流。像 Bootstrap 和 Foundation 这样的框架向我们展示了创建强大的组件系统的价值，它使在网络上构建事物变得更快、更好、更容易。

大约一年前，我加入了洛杉矶的网络托管和云服务公司 (mt) Media Temple，担任 UX 工程师。负责领导 (mt) 网站重新设计的 前端开发，我利用这个机会放慢脚步，重新审视我的前端开发方法。正是在那时，我意识到我之前构建大型网站的方式有点缺陷。我想分享我的一些学习过程，并阐明我在学习和构建设计系统时所采用的高级方法。

但设计系统到底是什么呢？

在 2013 年伦敦的 FOWA 大会上，Mark Otto 将设计系统描述为“构成产品的所有内容”（请参阅他的完整演讲：构建自己的 Bootstrap）。

所有内容？所有的内容。从排版、布局和网格、颜色、图标、组件和编码规范，到声音和语气、风格指南和文档，设计系统将所有这些内容整合在一起，使您的整个团队能够学习、构建和成长。

起初，我不确定我应该开始构建自定义内容，还是使用现有的框架，比如 Bootstrap。最终，出于以下几个原因，我决定放弃使用后者

• 我们已经拥有了自定义设计。当我加入 Media Temple 时，新网站的视觉设计已经接近完成。如果我使用一个框架，我将不得不对其进行大量的自定义，以使其符合我们的设计。
• 我想根据团队的偏好建立编码规范和结构。同样，我将不得不花大量时间重命名类或重新组织内容以满足我们的需求。

我将花费在剔除框架上的时间似乎并不值得。我觉得构建我们自己的框架从长远来看对我们来说将是有益的，更易于维护，并且作为奖励，它将是一次令人难以置信的学习体验。我也很幸运地拥有足够的时间来完成它，以及一支渴望参与其中的团队。

建立顶级目标

在重建遗留网站时，您将有机会改进很多方面。在我开始任何实际开发之前，我首先设定了一些顶级目标

• 组织：混乱的代码库可能会变成难以处理的噩梦。确保我们拥有经过深思熟虑的结构和方法非常重要。
• 可维护性：随着时间的推移，将会有新的开发人员加入进来修复错误并添加功能。我们需要制定适当的指南和规范，以便人们能够轻松地正确地完成工作。
• 响应式：随着移动/平板电脑流量的稳步增长，使体验与平台无关非常重要。
• 可扩展性：公司未来将会发展，它的网站也应该如此。创建促销页面和/或新产品页面不再是一项令人不快（并且几乎不可能完成）的任务。

我的“顿悟”时刻

带着这些顶级目标，我开始进行广泛的研究。我从阅读 关于 HTML 语义和前端架构 开始，并发现了构建灵活的 模块而不是页面 的好处。那是我“顿悟”的时刻。

以前，在构建大型网站时，我习惯于按页面模板划分工作。我会处理一组相关的模板，然后继续处理另一组。这种方法的问题在于，如果团队之间的沟通不畅，你最终会得到许多类似的——有时是完全相同的——模块和组件，以不同的方式标记和设置样式。如果你没有花费额外的时间进行重构，你的代码库将变成一个 一团糟。

我决定深入研究两个出色但不同的项目：InuitCSS（由 Harry Roberts 创建）和 Bootstrap（由 Mark Otto 和 Jacob Thornton 创建），我很快就意识到我需要采取的下一步是制定关于如何编写我们的 HTML、CSS 和 JavaScript 以及我们的整体前端方法的指南。

编码规范和指南

受 Idiomatic HTML、CSS 指南 和 Idiomatic JavaScript 的启发，我开始将这些指南改编成我们自己的编码指南。在此过程中，我发现并采用了一种有趣的名命方法，称为 BEM（块、元素、修饰符）。这本质上是一种巧妙的方式来命名你的 CSS 类，使其更有意义且更易于理解。

我们略微修改后的约定是

• .block {} – 代表主要组件。
• .block-elementName {} – 帮助构成整体组件的子元素。
• .block--modifier {} – 用于改变组件状态或外观的修饰符类。

以下是用这种方法创建的警报框示例

/* Main 'alert' component */
.alert {}

  /* Sub-components that make up the 'alert' */
  .alert-text {}
  .alert-close {}

/* Modifiers for various styles of the 'alert' */
.alert--warning {}
.alert--error {}
.alert--success {}
.alert--info {}

我还确定了一组工具来帮助我们完成工作，包括 LESS（用于我们的 CSS 预处理 需求）和 Grunt（用于编译我们的 LESS 文件以及压缩、缩小和合并我们的代码）。

开发基础样式

类似于 InuitCSS 和 Bootstrap，我创建了一个名为 mt-global.less 的主样式表，它将导入所有站点样式并创建最终的 mt-global.css 文件。为了保持组织，我创建了几个文件夹

• core – 这将包含我们的自定义变量和 mixin。
• vendor – 用于使用的供应商实用程序，例如 LESSHat 和 REMixins。
• base – 用于所有底层基础样式，例如排版、颜色和结构。

我从 normalize.css 开始，根据需要对其进行调整，并继续设置标题、链接、列表、表单元素和表格等通用元素的样式。

识别和构建组件

基础样式到位后，是时候全面查看一下网站，并开始识别各个组件了。我开始基于设计中使用的网格构建自定义网格系统。从那里，我继续处理按钮、号召性用语链接、英雄单元和导航等常见元素。

在构建组件时，我开始寻找方法将通用样式抽象成可重复使用的对象，类似于 媒体对象。InuitCSS 在这里提供了很大帮助，因为它包含大量 有用的对象。所有这些样式都被放在名为 components 的文件夹中。

识别和构建模块

大多数组件准备好后，是时候使用这些构建块来创建每个页面的各个模块了。我创建了另一个名为 modules 的文件夹，并开始将它们组合在一起，从站点标题、页脚和英雄单元等全局模块开始。

建立模式

在我构建组件和模块时，我开始使用 样式指南样板 将它们插入样式指南。结果是，对于任何有兴趣了解如何为网站做出贡献的团队成员来说，这是一个单一参考点。一旦整个团队都能够访问样式指南，构建页面模板就变得轻而易举。这只是一个混合和匹配模块，并在必要时扩展或自定义它们的问题。

结论

构建设计系统是一个漫长而充满试错的过程。成熟的框架可以为你节省数周的开发时间，但如果你使用的是已经经历过多次发布的框架构建了你的 web 项目，维护它可能会很困难。你是否会在每次发布时都升级你的代码库？如果你的代码库已经被定制到无法更新的程度，该怎么办？

如果你有机会从头开始重建网站，构建一个自定义解决方案可以解决很多问题：它有助于建立一个定制的系统，让你的整个团队都能快速轻松地学习如何为你的项目做出贡献；它由你构建，专门为你的公司需求而设计；最重要的是，它是为未来而构建的。它不会被绑定到其他项目的演进和方向，可以根据你的公司节奏自由扩展。

研究。构建。学习。重复。
– John Polacek

最重要的是，这是一个令人难以置信的学习经历，也是我们团队的骄傲之源。我鼓励每个人研究关于设计系统和不断变化的网页设计过程的 大量资源。