随着设计系统的火爆，原子设计理论也被越来越多的人关注。因为设计系统的基础是组件库，而组件库是建立在原子设计理论上的。很多人读了几篇原子设计的文章，觉得很简单啊，不就是原子到分子，分子到组织，层层嵌套吗？
然而，用起来就傻了。
听了许多大道理，依然过不好这一生。
在实际应用中，遇到的第一个问题，到底什么是原子？
按钮是原子吗？颜色是原子吗？文字是原子吗？图标是原子吗？
如果答案不是很确定，那说明你其实没弄懂原子设计理论。
该如何定义原子，我们先看网上的文章都是怎么解释的。
大多数文章都将“颜色”和“按钮”都划分在了原子阶段，这就出现了一个互相矛盾的地方，即按钮本身的属性里就包含了颜色。
原子是最基础、最小的元素，不能再被分割，那为何按钮和颜色都是原子？颜色是原子的话，按钮不应该是分子才对吗？
可是《Atomic Design》这本书的原文中，按钮确实是被划分成了原子，这到底该怎么解释？
我们从原书中试着寻找答案。
Brad Frost 提出原子设计的灵感来自于下图：
该图将HTML元素按照化学的元素周期表的形式进行了总结和排列，作者从而联系到了化学的原子构成。
他提出每个HTML元素都是一个原子，从而构成分子和组织，形成一套分层的界面组成方法。
书中对原子是这样定义的：
These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
Atomic Design
作者对原子的划分是基于HTML元素的，包括文字标签，输入框，按钮等等。
稍微懂一点前端知识的人都知道，前端页面的最终外观表现是由HTML+CSS构成的，这两者相互独立，各司其职且不可拆分。
HTML是页面的内容构成，它决定页面的最终构成，是两个轮子还是四个轮子；CSS是页面的样式，也就是外观表现，是黑色的轮子还是红色的轮子。
原子设计理论主要是针对HTML的，也就是页面的内容构成。它关注的核心是确定性，即最后是卡车还是摩托车；至于车身是什么颜色，轮胎是什么颜色，这些都是变量，属于不确定性，交给样式来解决。
举个例子，“按钮”被划分为原子，它的样式如大小、颜色、边框、圆角都是按钮本身的属性，不可拆分。
用乐高积木来类比一下，原子就是每个积木的碎片，有长条形的，有圆形的，有方形的，它们的不同形状代表了不同用途，属于不同的原子。而它们的颜色是本身就有的，不能再拆分。
你可以说组成轮胎的圆形碎片是原子，但不能说轮胎的黑色是原子。
弄清了这一点，我们来重新定义一下原子：
原子是最小的界面构成元素，它包括文字标签、按钮、输入框等等，而不是颜色、文字大小、边距等等样式属性。
搞清楚这些对于我们实际工作有什么意义呢？
会影响工作流程，从而提升协作效率。
对于一个组件来说，它的HTML构成一般是不会变化的，改变的仅仅是CSS样式。
我们要进行换肤功能，改一个主色就可以，对应到前端就是一个CSS样式，不会影响HTML的结构。
就像我们将乐高积木的轮胎从黑色改成红色一样，汽车的结构没有改变，只是变了轮胎的颜色。而不是将黑色的轮胎拆下来，再换上红色的轮胎。
这就是结构和样式分离的好处，也是原子设计的优势。
如果将颜色、边框等样式定义为原子，则会造成设计和前端沟通上的障碍，降低协作成本，从而失去设计系统的意义。
最后，总结一下。
原子设计是针对页面元素构成的一种分层思维方法，它的应用对象是HTML元素，而不是样式。
那在创建设计系统时，颜色、边框、圆角这些样式该如何定义呢？它们如何对应到前端CSS样式中？前端和设计如何协同？答案是 design token，下一篇文章我们再详细讨论。
