跳到主要内容

您应该使用Atomic Design的10个理由

Atomic Design
(图片来源:吉姆·麦考利)

+$If you've been in the frontend development community for a while, you've probably heard of a little thing called Atomic Design. Coined by布拉德弗罗斯特+$, Atomic Design is a methodology inspired by chemistry.

+$Just as all matter is made out of atoms that combine to form molecules, which in turn make up more complex organisms, Atomic Design  involves breaking a网站布局+$down into its basic components and then working up from there to create a site.

+$There are many benefits to using Atomic Design; read on to discover 10 reasons why  it'll make your life easier.

01.您可以混合和匹配组件

通过将组分分解为基本原子,可以很容易地看到网站的哪些部分可以重复使用,以及它们如何混合和匹配以形成其他分子甚至生物体。

Atomic Design: elements

可以重新混合这五个基本元素以创建一系列页面

例如,假设一个站点只包含五个原子:小图像,大图像,段落,列表项和链接。您可以通过复制和组合这些原子来制作一个非常有用的网页来制作分子。

02.创建样式指南很简单

如果从一开始就根据原子设计原则创建一个站点,那么在构建站点之前创建的所有原子和分子都可以作为基本样式指南。即使对于没有原子构建的站点,也不难推断出基本组件并将它们组合在一起构建更多页面。但请记住,最好始终以原子方式创建一个站点,而不是稍后尝试将Atomic Design原则引入站点。

03.易于理解的布局

原子设计的网站的代码通常比创建更传统的方式更容易阅读。这不仅在创建期间,而且在将来回顾网站以供参考或进行小调整时也是如此。

由于有关使用原子分子和生物体的文档以及在何处使用,因此很容易看出代码的每个部分代表什么。另一个好处是它可以更容易地向新开发人员解释代码库。

04.守则更加一致

Atomic Design: Pattern Lab

Pattern Lab是一组工具,使Atomic Design更容易

使用原子设计,您可以使用预定义原子来创建站点布局,很容易看到哪些组件正用于站点的不同部分。这降低了编写重复代码的可能性。

例如,如果有人在不使用原子设计的情况下创建网站,并且他们需要一个红色按钮,则他们必须浏览整个网站以尝试找到现有网站。如果确实存在,则需要将该代码复制并粘贴到新实例。如果没有红色按钮,则需要创建一个新按钮。但是,通过原子设计,可以很容易地返回原子列表并找到确切的红色按钮。

当涉及Pattern Lab库时,这变得更容易。模式实验室是一组工具,使原子设计更容易。在我们的示例中,它将为原子提供搜索栏,使搜索和查找完全正确的红色按钮变得容易。

05.不关注像素完美的设计

由于Atomic Design背后的想法是使用原子作为网站创建的构建块,因此Web开发人员不太可能为类似的事情创建许多原子。相反,他们可以简单地浏览现有原子列表,并根据需要调整它们以创建新原子。

一个很好的例子就是网站上的标题。假设创建者有一个用于该网站的标题列表,全部为黑色:主标题,子标题和段落标题。他们有一段时间没有在网站上工作,需要回到网站添加一个新的蓝色标题。他们可以看看已经存在的标题,并自定义其中一个以获得他们想要的结果。

06.更快的原型设计

在网站创建开始之前拥有一个原子列表意味着您可以快速轻松地模拟页面 - 所需要的只是选择并组合页面所需的元素。然后可以为最终站点定制和优化模型。

07.更容易更新和删除网站的部分内容

由于任何时候只有一个原子,分子或生物被改变,因此很容易确保对组件的任何更新都传递到整个站点的所有其他实例。同样,可以轻松删除不需要的组件。

08.更模块化的文件结构

虽然Atomic Design在标记(HTML)方面非常普遍,但我相信这些技术也可以用于CSS,JavaScript或用于创建网站的任何其他语言,以使整个代码更加模块化和可重用。

我自己使用原子CSS为我创建的网站,并发现这种方法的好处。但是,我相信随着HTML组件之类的到来,将特定于原子的CSS和JavaScript与HTML一起分离到自己的文件夹是有意义的,所以如果有什么需要更新或删除,你就知道到底要去哪里以及什么改变。

09.整体组件减少

如果创建者在创建网站之前有一个原子,分子和生物列表,那么他们更有可能使用已经存在的内容,而不是为小变化创建新的组件。

如果设计需要字体大小为4.5em的标题,但原子列表中已存在4em大小的标题,则创建者更有可能选择4em标题,而不是创建一个全新的标题。这将导致整体使用更少的原子,从而使网站更清洁,更精简。

10.探索模式实验室

Atomic Design: Pattern Lab

Pattern Lab是一个静态站点生成器,也来自Brad Frost

这并不是原子设计的好处,而是布拉德弗罗斯特和布拉德弗罗斯特创造的伟大工具戴夫奥尔森帮助这个过程。它本质上是一个静态站点生成器,它使用胡子模板和JavaScript查看器进行交互。它是基于移动优先设计创建的,具有调整页面大小,向网站各部分和代码片段添加注释的选项。

原始版本是用PHP编写的,但有两个Node版本:一个用于gulp,另一个用于Grunt。我强烈建议搞乱上的演示模式实验室网站,让您更好地了解它的工作原理和一般的原子设计。

+$Want to know more? Read Brad Frost's original post about原子设计

相关文章:



翻译字数超限