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

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

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

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

molecules

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

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

Organisms

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

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

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

Templates

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

Pages

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

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

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

对比思考。

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

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

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

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

1. 复用的class，有效stylesheet大小。
2. 复用性最大化
3. 减少class name冲突问题
4. 从HTML元素上可以获得元素的样式（HTML可以看到class 而不用跳到指定文件获取）

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

目前国内大多数的公司，组与组之间的技术栈都未必一致，这样的前提下，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

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

共勉，加油！

Contact Me

all encode by base64

• Email: a2FuZzk1NjMwQGdtYWlsLmNvbQ==
• QQ: OTA3NzQ3ODc0QHFxLmNvbQo=

转载需注明出处与作者

否则将被视为侵权

Reprinting must indicate the source and author

Otherwise it will be regarded as infringement

Comments