过往阅读总结之原子化设计系统

原子

代表页面最基本组成成分，例如我们的原子这里可以理解为一个表单上的一个input filed

原子是每一个足够抽象的单元，例如color等，你可以很轻易地复用它们

molecules

把分散的Atoms 单元组合起来成为一个molecules

例如表单元素组合可以形成一个表单

Organisms

这一层相当于已经是页面构建块的组件了。

它由molecules组件，相对复杂的一部分。

例如我们网页上的一个section 块

Templates

模版已经很接近我们目标的page了，用户可以在这里看到我们的网页原型，这层也是Organisms与molecules的常见组合地

Pages

pages相当于是模版的实例化，将占位元素都替换成真实存在的。

pages是页面设计可见的最后一步应该是反复讨论的终点。

原子设计使我们能够从抽象到具体。因此，我们可以创建促进一致性和可伸缩性的系统，同时在最终上下文中显示内容。通过组合而不是解构。

对比思考。

atomic设计我们在css也可以用到。

由YAHOO提出。主要点强调于抽象可抽象部分，作为最小单元进行复用。

虽然单位越小，代表复用性越强。

这样的前提下，atomic css带给我们的优点显而易见

但是缺点也不是没有，维护成本，还有抽象的日益膨胀，对新加入项目的人员增加学习成本。

目前国内大多数的公司，组与组之间的技术栈都未必一致，这样的前提下，atomic css的实施成本很大。

组件样式共享库最佳实践

https://www.figma.com/blog/component-styles-and-shared-library-best-practices/

这种模式简单的一个实现(游乐场)

http://demo.patternlab.io

视频，bradfrost演示实际应用中我们如何建立design-system

Let’s Make A Design System! Live Coding at Smashing Conf

在写自己的组件库，对以前找过的一些资料进行总结回顾

共勉，加油！

all encode by base64

转载需注明出处与作者

否则将被视为侵权

Reprinting must indicate the source and author

Otherwise it will be regarded as infringement