如何构建维护设计组件库？我总结了这6个方法！

2021-12-4 10:36| 查看: 890| 评论: 0

摘要: 原文引自 medium 上的一篇文章 Keeping Things Organized。该译文并非完整原文，内容已做删减和调整，并加入了部分译者观点。如何有条不紊地构建及维护设计组件库？这可不是个简单的问题。面对此问题，向开发同学们 ...

原文引自 medium 上的一篇文章 Keeping Things Organized。该译文并非完整原文，内容已做删减和调整，并加入了部分译者观点。

如何有条不紊地构建及维护设计组件库？这可不是个简单的问题。面对此问题，向开发同学们学习是个不错的选择。无论是设计元素的命名，还是组件的「封装」，设计同学们都能从程序开发的通用做法中汲取新思路。下面，让我们一起来了解让设计组件库井井有条的方法。

本期提纲：

原子设计
页面结构化
命名规范化
控件封装
Design Tokens
版本管理

原子设计

构建组件库，最基本的思维模式即原子设计（Atomic Design）。其实，这个概念并不新鲜，开发同学也有类似的思维模式。

1. 基本概念

考察代码是否有条理，最好从命名开始。BEM（Block Element Modifier）是一种前端开发所用的模块化命名方法，它能使代码的可读性更高，也更便于协作。BEM 将事物分为 3 个层级来命名：

Block

一个有独立意义的实体，对标原子设计中的分子（molecules），如：

header
container
menu
chackbox
input

命名方式为添加一个句号作为前缀，如：.block。

Element

Block 的一部分，没有独立意义，对标原子设计中的原子（atoms），如：

menu item
list item
checkbox caption
header title

命名方式为在 block 名后添加两个下划线，如：.block__elem。

Modifier

用来定义 block 或 element 的样式、表现或状态的元素，如：

disabled
highlighted
checked
fixed
size big
color yellow。

命名方式为在 block 或 element 后添加两个破折号，如：

.block–mod
.block__elem–mod
.block–color-black
.block–color-red。

这里为熟悉前端的设计师举一个实际案例，以了解如何用 BEM 来写下图所示的三个按钮：

HTML

<button class="button"> 
Normal button 
</button> 
<button class="button button--state-success"> 
Success button 
</button> 
<button class="button button--state-danger"> 
Danger button 
</button>

CSS

.button { 
display: inline-block; 
border-radius: 3px; 
padding: 7px 12px; 
border: 1px solid #D5D5D5; 
background-image: linear-gradient(#EEE, #DDD); 
font: 700 13px/18px Helvetica, arial; 
} 
.button--state-success { 
color: #FFF; 
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x; 
border-color: #4A993E; 
} 
.button--state-danger { 
color: #900; 
}