第三章 原子设计工具

在上一章中，我介绍了用于构建UI的原子设计理论。我希望你能理解，原子设计对于构建UI设计体系是非常有用的思维模型。现在，该从理论中走出来，将原子设计应用于现实世界中。

基于样式做设计和开发的基础是样式库，它是组成用户界面的所有UI组件的集中枢纽。正如我们在第1章中讨论的那样，样式库的好处很多：

• 可以促进整个体验的一致性和凝聚力。
  
• 加快团队的工作流程，节省时间和金钱。
  
• 在项目涉及的所有岗位之间建立协作性更好的工作流。
  
• 建立组织内部（包括外部）每个人之间的共享词汇表。
  
• 提供有用的文档，帮助我们影响利益相关者、同事、甚至第三方。
  
• 使跨浏览器/设备，性能和可访问性测试更加容易。
  
• 为团队提供了良好的扩展性基础，可以随着时间的推移进行修改、扩展和改进。
  

听起来很厉害，对吧？我猜你肯定会说：“真NB，我要抱紧样式库的大腿！”但如何将样式库实现出来呢？那你算找对人了，本书的其余部分正是针对这一点。本章将介绍用于创建样式库的有用工具，下一章将讨论如何使样式库成为设计和开发工作流的基石，第五章将介绍如何使设计体系经受住时间的考验。

本章将通过叫做“Pattern Lab”的工具来讨论高效的样式库应该具备哪些特质，该工具是由Web开发人员Dave Olsen，Brian Muenzenmeyer和我维护的一个开源项目，用于执行原子设计体系。尽管我马上就要兴奋地讨论Pattern Lab及其各种功能，但强调一点，本章的重点是介绍结构良好样式库的特点，而不是向你出售任何一种特定工具。Pattern Lab本身开源，也不需要出售！没有哪种工具可以完美地适合每种环境设定和使用情景，但是在决定使用哪种工具来创建样式库时，请牢记以下原则。

Pattern Lab到底是什么？

在深入研究Pattern Lab的工作原理之前，有必要花一些时间来解释一下，它是什么，不是什么。

Pattern Lab是：

• 用于构建原子设计体系的静态站点生成工具；
  
• 样式文档和注释工具；
  

• 样式入门工具箱。
  

  Pattern Lab不是：

• UI框架，如Bootstrap或Foundation；
  

• 设计语言，库或样式相关；
  
• 内容管理系统的替代方案。
  

我们从术语“ 静态站点生成工具”开始逐步讲解。静态站点生成工具会获取一些源代码和资源，对其进行编译，然后在另一端输出基础的HTML，CSS和JavaScript。Pattern Lab接收源代码（即样式），并将这些样式编译到样式库内，以代表一定功能的前端UI。

那么Pattern Lab长什么样？请看下图。

默认的Pattern Lab仪表板。它虽然不太美观，却很实用。

设计的挺差劲，对吧？而实际上这种极简的设计是有意为之。为了避免与Bootstrap这样的UI框架混淆，故意简化了设计，因此没人会错误地把Pattern Lab的演示UI当做推荐样式。Pattern Lab没有提供任何关于如何设计或构建前端代码的方法，你必须自己完成所有工作。你和你的团队自己决定UI的外观，命名约定，语法，结构，库和脚本等。甚至可以在 Pattern Lab中使用UI框架，例如Bootstrap 。Pattern Lab存在的目的是帮助你将所有资源整合在一起。

在技术层面，Pattern Lab使用PHP或Node.js作为引擎，将样式整合在一起并生成样式库。但是，你无需成为PHP或Node专家即可使用Pattern Lab，就像无需知道如何构建内燃机就能开车一样。此外，你的最终网站不必使用PHP或Node构建即可使用该工具，因为Pattern Lab输出的是与后端无关的HTML，CSS和JavaScript。因此，像选择任何技术工具一样，你可以选择适合组织基础架构的样式库工具，从而与团队紧密合作。

我好像又跑题了，但是不要慌。本章侧重于Pattern Lab的总体功能和构建高效样式库的原理，而不是讨论过深的技术难题。如果你对技术有兴趣，你可以查看Pattern Lab的官方文档以深入了解。

使用Pattern Lab构建原子设计系统

要了解Pattern Lab背后的核心概念，你需要了解俄罗斯套娃。

俄罗斯套娃。图片来源：Flickr上的Tromal

俄罗斯套娃是雕刻精美的，尺寸不断增大的空心木制娃娃，彼此放置在一起。Pattern Lab中的样式以类似的方式操作：最小的样式（原子）包含在较大的样式（分子）中，更大的样式（有机体）中包含这些样式，而有机体则包含在更大的样式（模板）中。

以这种方式构造UI会遵循“DRY”原则，这是一个长期存在的计算机科学原理，代表“不要重复（don’t repeat yourself）”。这意味着当你更改样式时，使用该样式的任何地方都可以神奇的随之同步更改。这种俄罗斯套娃的方法极大地加快工作流程，并免去因一个细微的改变就从数百个Ps文档中进行筛选的麻烦。

为此，Pattern Lab使用了Mustache的include功能，Mustache是一种轻逻辑的模式解析语言。下面是Mustache include的示例：

{{> atom-thumbnail }}

这是Mustache的代码，因为双花括号（{{}}）看起来像没有展开的胡须而得名。大于号（>）是Moustache告诉Pattern Lab去include一个名叫“thumbnail”的原子样式的方式。Pattern Lab将在其样式文件夹中进行搜索，以找到名为“thumbnail”的原子。

这就是Pattern Lab的patterns文件夹结构的外观。你可以根据需要对这些文件夹进行命名和分类，包括更改标签“原子”，“分子”和“有机体”，“模板”和“页面”。最重要的考虑因素是建立对你的团队最有效的命名和分类。

我们知道include的长啥样了，现在做一个练习，看看我为Time Inc创建的网站中的一些样式。这是我们设计的一种可复用样式：

对于Time Inc.的网站，我们创建了一个基本的块状分子，其中包括缩略图，标题和摘要文字。

这种样式看起来应该相当熟悉。缩略图、标题和摘要文字作为一个单元一起展示是很多网站上的常见样式。让我们窥视一下背后的代码，看看如何构造此样式。

<div class="block-post">
    <a href="{{ url }}">
        {{> atoms-thumb }}
        <h3>{{ headline }}</h3>
       <p>{{ excerpt }}</p>
    </a>
</div>

可以看到我们的代码里面有：HTML标记里包含一个名叫block-post的容器 div 类; 一个链接; 一个通过Mustache include出的缩略图；一个用于标题的

元素；和用于摘要文字的

标签。你会留意到还有很多的Mustache代码url，headline和excerpt，我们稍后将使用它们来动态替换实际内容，后边会详细介绍。现在我们的样式标记已经建立，我们可以使用同样的include方法在更大的样式中包含该代码块：

{{> molecules-block-post }}

现在，我们看看更复杂的有机体，例如网站的头部，如下图：

网站头部由相当常见的元素组成，例如logo原子，主导航分子和搜索分子。

当我们打开查看Pattern Lab中网站头部的代码时，会看到以下内容：

<header role="banner">
    {{> atoms-logo }}
    {{> molecules-primary-nav }}
    {{> molecules-search }}
</header>

这里边有一个基本

元素，并且在该元素内包括logo原子，主导航分子和搜索分子。现在，我们可以在任何需要的地方include这个相对复杂的样式。

{{> organisms-header }}

我希望到现在为止，你体会到了俄罗斯套娃的作用。最小的原子包含在较大的分子中，而这些分子包含在较大的有机体中。现在，让我们将这些组件插入到布局中。以首页模板为例：

The Time Inc.主页模板由几个可复用的样式组成：一个全局头部，一个主题图片，几个区块（包含图像，标题，摘要文字和操作按钮），一个包含四个栏目的区域，一个仿真地图和一个全局页脚。

快速浏览主页模板，你可以看到一些非常典型的样式：顶部的网站头部，底部的网站页脚和全屏宽度的主题图。还可以看到在模板中重复出现的一些其他样式。那么，它在代码中是如何呈现的？跟你想的一样，它包含更多内容！

{{> organisms-header }}
<main role="main">
    {{# hero }}
    {{> molecules-hero }}
    {{/ hero }}
    <section>
        {{# experience-block }}
        {{> molecules-block-main }}
        {{/ experience-block }}
        {{# experience-feature }}
        {{> organisms-story-feature }}
        {{/ experience-feature }}
    </section>
    <section>
        {{# factoid-advertising }}
        {{> organisms-factoid }}
        {{/ factoid-advertising }}
    </section>
    <section>
        {{# advertising }}
        {{> molecules-block-main }}
        {{/ advertising }}
    </section>
    …
</main>
{{> organisms-footer }}

在这个阶段，较小的样式已经构建完毕，因此模板需要做的就是将它们置入页面布局的上下文中并指定唯一的名称。仔细看一下代码，请注意某些样式如{{> organisms-header }}和{{> organisms-footer }}与前面的例子一样被include进来。但是，还有一些样式式通过其他信息加以补充后被include进来的，例如：

{{# factoid-advertising }}
{{> organisms-factoid }}
{{/ factoid-advertising }}

organisms-factoid以与所有其他样式相同的方式进行include，但我们将其包含在Mustache section中并命名为factoid-advertising然后来include，在Mustache代码中由#和/来表示。通过为样式实例赋予唯一的名称，我们可以将其锁定并动态替换样式的内容。下一节将对此进行更多介绍！

这种用于俄罗斯套娃构建UI的方法很简单，但功能非常强大。该结构允许设计和开发人员保持“DRY”原则，从而节省时间、精力和金钱。该方法允许团队在构建最终的UI的同时创建基础的UI设计体系。毕竟，最终界面是其基础设计体系的一个实例。团队还可以在概览和具体之间切换，对特定样式进行修改以修复bug，同时还可以查看其对整体页面布局所产生的影响。

处理动态数据

在样式库的上下文中阐明UI样式的底层内容结构很重要。这也是为什么我们一直使用灰度图像和包含字符限制的占位符文本来展示的原因。但是，尽管此信息对创意团队有用，但灰度图像和占位符文本并不是用户在网站上与之交互的实际内容。我们需要一种用真实的代表性内容替换虚拟内容的方法，以确保我们的UI样式与其中包含的内容真实匹配。为了演示Pattern Lab如何动态地将真实内容替换进模板中，让我们看一下Time Inc.主页模板和页面的并排比较：

Time Inc.主页模板和页面级别的并排比较。模板阐明了设计系统的内容结构，而页面则显示了系统的外观以及所显示的真实内容

左侧是页面模板，该模板阐明了组成网页样式的内容结构。右边是页面，在此处替入真实的代表性内容，以演示最终UI的外观并测试设计体系的有效性。如何在Pattern Lab中将虚拟内容替换成真实内容？Pattern Lab使用JSON（和YAML，Markdown和其他数据格式一样）来定义和替换设计中内容的动态数据。默认的占位符数据定义在一个名为data.json的文件中，该文件位于Pattern Lab的/source目录中。在此文件中，我们定义了构成用户界面的所有文本，图像路径和其他动态数据。这是Time Inc.的data.json文件中的一个示例：

"hero" : {
  "headline": "Lorem Ipsum",
  "img": {
    "src": "/images/sample/fpo_hero.png",
    "alt": "Hero Image"
  }
}

对于开发人员来说，这种格式很可能看起来很熟悉。如果你不是开发人员，也不要被吓到！你可以忽略大括号和引号，就会看到我们定义了一个hero对象（来直接表示网站头部下方全屏主题图），其中包含了值为“Lorem Ipsum”的标题（headline），和一个src值为“/images/sample/fpo_hero.png”的图片（img）。我们只定义该对象的属性并为这些属性提供值。一旦定义了这些对象，我们就可以在Pattern Lab的页面级别来覆盖它们的属性。这是通过在/pages目录中创建一个与页面样式名称（对于Time Inc.的首页，我们将其称为00-homepage.json）相匹配的新JSON文件来实现的。

在“页面”目录中，我们有主页样式以及与样式名称匹配的JSON文件。在这里，我们将使用页面特定的内容覆盖默认内容

当我们打开00-homepage.json时，可以覆盖之前建立的占位符数据。如下：

"hero" : {
  "headline": "Moving People",
  "img": {
    "src": "/images/hero_beyonce.jpg",
    "alt": "Beyonce"
  }
}

通过覆盖默认数据，hero标题现在显示为“ Moving People”，而不是“ Lorem Ipsum”。并且，我们现在指向的是碧昂斯所在的图片“ /images/hero_beyonce.jpg”，而不是指向灰度的占位（FPO）的主题图。对于网站的每个部分，将继续为动态数据建立默认值，然后将其替换为特定于页面的内容。除了替换诸如标题之类的简单字符串外，我们还可以将变量动态设置为true或false，从而遍历一系列项目，等等。只需对JSON文件进行一些更改，我们甚至可以显著的改变界面，这些将在下面详细讨论。

用伪样式表达样式变化

从以往的经验来看，使用静态工具的设计师倾向于仅设计最佳情况。类似于这样：用户的名字叫马化腾，总是整齐地放在一行；头像看上去像是写真照；简介也完全填写了；个人资料内容的两列高度完全相同。但是，这些最佳情况几乎很少发生在现实中。为了创建更健康、更有弹性的设计，我们需要同时考虑最佳情况和最坏情况以及两者之间的所有情况。如果用户不上传头像怎么办？如果用户购物车中有87件商品怎么办？如果产品有14个选项怎么办？如果博客文章标题包含400个字符怎么办？老用户怎么设计？初次使用者怎么设计？如果文章没有任何评论怎么办？如果有七层嵌套的评论，该怎么办？如果要在仪表板上显示紧急通知怎么办？在静态设计工具中呈现这些UI变化是一项非常繁琐的工作，因此很少有人设计它们。但是，如果我们要创建一个能解决内容所有变化和现实的设计体系，那就必须考虑那些“假设”问题。那该如何解决所有形式的UI变化，而又不会在此过程中备受折磨？Pattern Lab的伪样式（pseudo-pattern）功能可以帮助我们仅通过少量的数据更改来表现截然不同的场景。假设我们正在设计一个app，其仪表板显示项目合作者列表。如下图：

假设app中的项目合作者列表

为了在每个模块中创建动态内容，我们将合作者列表定义为dashboard.json中的一个数组：

"collaborators" : [
  {
    "img": "/images/sample/avatar1.jpg",
    "name" : "Steve Boomshakalaka",
    "title" : "CIA"
  },
  {
    "img": "/images/sample/avatar2.jpg",
    "name" : "Gingersnap Jujubees-Daniels",
    "title" : "President of the Longest Company Name in the World Corporation, Global Division"
  },
  {
    "img": "/images/sample/avatar3.jpg",
    "name" : "Sarunus Marciulionis",
    "title" : "Golden State Warriors"
  },
  {
    "img": "/images/sample/avatar4.jpg",
    "name" : "Sara Smith",
    "title" : "Short Title"
  }
]

默认情况下，我们的设计假设用户是普通用户而不是管理员，但是如果我们需要管理员角色，他可以从列表中管理项目合作者，该怎么办？如下图：

管理员的仪表板界面引入了额外的编辑和删除操作

要在Pattern Lab中的仪表板上显示管理员的编辑和删除操作，我们可以在pages文件夹中创建新文件，即一个伪样式，如下所示：

dashboard~admin.json

符号（~）表示伪样式。dashboard〜admin.json将继承dashboard.json中包含的所有数据，但同时允许添加或覆盖其他数据。这意味着我们之前在dashboard.json中定义的合作者列表依然起作用，只不过可以在dashboard〜admin.json中添加其他数据，如下所示：

"isAdmin" : true

我们定义了一个变量叫做isAdmin并将其设置为true。现在，可以使用它来有条件地include样式模块中的附加操作。

<div class="block">
  <img src="{{ img }}" alt="{{ name }}" />
  <h3>{{ name }}</h3>
  <h4>{{ title }}</h4>
  {{# isAdmin }}
  {{> molecules-block-actions }}
  {{/ isAdmin }}
</div>

前几行是提取的的我们在定义dashboard.json中的img，name和title。请密切注意包含在Mustache section中的“ isAdmin” 。这里表达的意思是：如果isAdmin设置为true，则include一个叫做的block-actions分子样式。该block-actions样式包含“编辑”和“删除”按钮，并且仅在isAdmin设置true为时（或其他任何设置为false）才显示。在默认dashboard.json中，isAdmin未设置，因此不会显示额外操作。在dashboard〜admin.json中，我们设置isAdmin为true时将会显示额外操作。你可以通过仅更改单个变量来扩展此技术，以显着更改整个界面（例如，更改主导航、在仪表板上显示其他面板、添加其他控件等）。功能十分强大。

如果你看懂了这部分，那么恭喜！你现在知道了如何在Pattern Lab中添加和操作动态数据。Pattern Lab的动态数据设计功能有以下关键优势：

• 在结构和内容之间建立清晰的分隔。样式的结构及其内容之间相互影响很大。但是，有弹性的设计体系会努力建立可包含各种内容变化且不可知的灵活样式。样式结构和数据的分离使我们能够保持“DRY”原则，并在不影响样式结构的情况下对内容进行更改。同样，我们能够对样式更改，而不必更新每个样式，因为它们都包含了不同的数据。这种分离可节省大量时间和精力。
  
• 建立临时CMS。建立默认数据和特定数据可作为临时内容管理系统。如前所述，静态设计工具不能很好地处理动态数据，但是安装WordPress，Drupal或其他CMS来演示UI变化又显得大材小用。Pattern Lab达到了一种平衡，它允许团队使用动态数据，但不必去设置MySQL数据库。
  
• 作为后端开发人员的行动方案指南，负责将前端UI集成到真实的内容管理系统中。后端开发人员可以查看在Pattern Lab中创建的UI，了解哪些数据是静态，哪些是动态的，然后将其转换到后端系统。
  
• 允许写作者、内容管理人员、设计师和其他非开发人员可以为动态设计体系做出贡献。作为前端开发人员，我数不清多少次必须要修改错别字、替换新图片、翻译副本文案以及对前端代码进行其他内容相关的编辑。无数次的调整内容让人感到绝望，我敢肯定，大多数开发人员都深有体会，大量的细节调整浪费时间和精力。通过分离结构和数据，Pattern Lab使非开发人员可以安全地管理内容相关的设计，从而使开发人员可以专注于构建设计体系的底层结构。

现在，我们已经介绍了Pattern Lab的核心功能，但是并没有结束！接下来，我们将讨论一些应考虑的附加特性，这些特性与你选择的创建样式库工具无关。

弹性样式的视窗工具

现在网络设备的多样性迫使设计人员重新拥抱媒体的固有流动性。幸运的是，诸如响应式网页设计之类的技术使我们能够在任何屏幕上展现完美外观和功能的布局。

毫无疑问，想要创建响应式设计，我们需要建立弹性的UI样式，同时，创建弹性布局样式还有其他优势。UI组件适应性越强，它就越具有弹性和多功能性。想象一下有一个组件（例如图片切换），可以将其放入需要的任何位置。有时我们可能需要将其作为占据整个视窗的全屏元素；有时可能需要将其包含在文章的上下文中；或者可能希望将其包括在侧栏中。最理想的情况是是流畅地构建组件，我们将其放入任何容器都可以适应其样式和功能。

实际上，这就是容器查询功能。容器查询使元素根据父级容器而不是整个视窗进行调整，这也是我们目前使用媒体查询来操纵元素的方式。虽然容器查询是作为本地浏览器功能开发的，但它允许我们这些痴迷于样式的设计和开发人员可以轻松创建和部署弹性UI体系。

了解了响应式设计，容器查询和传统的一些常识，现在我们明白为什么必须创建弹性UI样式。但具体该怎么做？样式库工具又如何帮助我们思考和实践弹性设计？

许多早期的响应式设计测试工具专注于查看流行的移动设备宽度，例如320px（竖屏模式下的iPhone 4），480px（横屏模式下的iPhone 4），768px（竖屏模式下的iPad）等等 。但是，Web 比移动视图、平板视图和桌面视图要更加多样化。为了帮助设计人员在测试响应式设计时更好地考虑整个分辨率范围，我创建了一个名为ish.的工具。

该工具称为ish.是因为选择小按钮会导致视窗变小，再次选择会提供另外的小视窗。选择中按钮可为你提供中等视窗，大按钮将出现一个大视窗。这些随机值可帮助设计和开发人员更好地考虑整个分辨率范围，而不是少数几个流行的设备尺寸。

ish.已包含在Pattern Lab中，这意味着我们可以在整个分辨率范围内查看我们的UI及其底层样式。

Pattern Lab在小视窗中显示设计

Pattern Lab在中等视窗中显示设计

Pattern Lab在大尺寸视窗中显示设计

ish.可以帮助设计和开发人员发现视窗连续区域中的bug，而且还可以作为对客户和同事进行展示的工具。通过直接在样式库中构建与设备无关的视口大小调整工具，客户和同事可以意识到，无论视口大小如何，其设计体系都应保持外观和功能良好。

底层代码查看视图

样式库的一个常见功能是能够在查看组成特定组件的基础代码。公开UI样式的代码可以缩短开发时间（我喜欢复制和粘贴进编码器），并且可以帮助团队负责人实施代码语法和样式约定。当大量开发人员在组织的代码库上工作时，这特别有意义。

样式库中要突出显示的代码类型会因组织而异，以便满足所使用的各种环境、技术和约定的要求。大多数市面上的样式库都展示了底层的HTML，同时一些库还包含了特定于样式的CSS和JavaScript。例如，Salesforce的Lightning设计体系显示了样式的HTML以及与该样式有关的所有（S）CSS。

Salesforce的Lightning设计体系展示了UI组件的HTML和SCSS代码

包含前端代码会使开发人员更加一致地进行编写，但这并不能保证完美。开发人员仍然有自我发挥的余地，从而编写出草率的、不一致的代码，因此一些组织建立了令人难以置信的复杂设计体系。像Lonely Planet这样的公司已经实现了样式库的“圣杯”，也就是说，它们的样式库和生产环境是完全同步的。我们将在第5章中进行详细地讨论，但在本节中值得提出来，演示它如何影响样式库中的代码。Lonely Planet的“Rizzo style guide”不仅提供HTML和CSS， 还对团队提供了include代码，方便其在合适的地方引用UI组件。

Lonely Planet的Rizzo设计体系样式库展示了模板的用法

此设置使核心开发团队可以为所有样式的前端代码维护单一的来源。对于开发人员来说，样式库只需要提供包含特点样式的代码。Pattern Lab提供了查看样式的基础HTML和用于生成HTML模板代码的功能。同时也可以扩展为展示相关的CSS和JavaScript代码。

Pattern Lab的代码视图演示了样式的模板代码和已编译的HTML

最终，无论你决定使用哪种样式库工具，都应该具有某种形式的代码视图。更重要的是，你创建的样式库展示的代码类型应该可以让你和你的开发团队尽可能提高效率。

在线文档和注释

在传统的孤立设计流程中，通常会创建冗长的线框图和规格文档。这些文档通常采用庞大的PDF格式，包含有关设计系统的各种有价值的见解、说明和文档。可悲的是，当项目进入生产阶段时，这些笨重的文物通常会被扔到（虚拟的）垃圾桶中。

事实不应该如此。UI的文档应包含各个岗位的见解，最重要的一点是，应该融入到动态的设计体系中。有效的样式库应该为定义和描述UI组件开辟空间，并包含可访问性、性能、美学以及其他方面的考虑。

Pattern Lab提供了几种为设计体系添加样式描述和注释的方法。可以通过创建与样式名称相对应的Markdown文件（例如pattern-name.md）来添加样式描述，该文件将在样式库列表视图中显示样式描述。

Pattern Lab通过在线样式示例旁显示重要的样式文档，这有助于团队交流定义、用法、示例、外部资源等

Pattern Lab还提供了一个很酷的功能，使你可以将注释附加到任何UI元素上，并在动态设计的上下文中查看这些注释。启用注释时，每个带注释的元素都会显示一个数字标记，单击该数字将跳至相应的注释。这使团队可以在整个UI的上下文中查看样式注意事项。漂亮整齐！

Pattern Lab的注释功能是交互式的，可以添加到实时用户界面中

使用样式继承提供上下文

在查看库中的各种样式时，我发现一个问题：“看起来挺不错，但是此组件实际在哪里使用？”定义和描述样式特征是一回事，同时我们可以提供有关UI样式的其他上下文信息。

得益于前面介绍的俄罗斯套娃include方法，Pattern Lab可以显示由给定的组件可以组成什么样式，还可以显示该样式在设计体系中的位置。

Pattern Lab的继承功能可显示样式由哪些组件构成，并显示使用该组件的所有位置

在上面的示例中，我们有一个名为的分子样式media-block，其包含图像、标题、文本和一组按钮。查看样式的继承，可以看到它包含一个名为atoms-square的样式，代表了缩略图大小的图像，还有molecules-button-bar，代表按钮组。我们还可以看到该样式的确切用途：media-block-list有机体。

这些上下文信息对设计和开发人员非常有用，他们可以知道自己的工作流程中一直使用继承功能。假设我们要对特定的样式进行更改，例如将图像的大小加倍或添加其他元素：我们将立即知道需要重新测试哪些样式和模板，并进行质量检查以确保更改不会破坏界面。继承功能还有助于指出冗余和未充分使用的样式，以便团队可以在启动日期临近时将它们从样式库中剔除。

萝卜青菜各有所爱

以上就是所有的内容。Pattern Lab为团队提供了一些有用的功能，以帮助他们创建完善的设计体系。但是，没有任何一种工具可以完美地适合所有人和每种情况。市面上有很多很棒的工具可以帮助你创建有效的样式库，而你决定使用那种工具则会受到组织的环境、技术、工作流程和文化的影响。

在选择用于创建样式库的工具时，你需要注意有效样式库的这些品质和功能：

• 提供样式描述和注释。
• 展示相关的模式HTML，模板，CSS及JavaScript代码。
• 查看整个分辨率范围内的样式。
• 展示样式变化的能力，例如选中或禁用的选项卡。
• 将真实的代表性内容动态添加到样式结构中的能力。
• 提供上下文信息，例如哪些样式组成特定组件以及使用该组件的位置。
  

归根结底，这与我们用于创建样式库的工具无关，而与我们如何使用它们有关。创建和维护有效的设计体系意味着极大地改变组织的文化、流程和工作流。听上去很难，事实也确实如此。但是不要慌！本书的其余部分将详细介绍创建和维护成功的设计体系的整个过程，以使你的团队获得长期成功。