·

原文引自 medium 上的一篇文章 Keeping Things Organized。該譯文并非完整原文，內(nèi)容已做刪減和調(diào)整，并加入了部分譯者觀點(diǎn)。

如何有條不紊地構(gòu)建及維護(hù)設(shè)計(jì)組件庫？這可不是個(gè)簡單的問題。面對此問題，向開發(fā)同學(xué)們學(xué)習(xí)是個(gè)不錯(cuò)的選擇。無論是設(shè)計(jì)元素的命名，還是組件的「封裝」，設(shè)計(jì)同學(xué)們都能從程序開發(fā)的通用做法中汲取新思路。下面，讓我們一起來了解讓設(shè)計(jì)組件庫井井有條的方法。

本期提綱：

• 原子設(shè)計(jì)
• 頁面結(jié)構(gòu)化
• 命名規(guī)范化
• 控件封裝
• Design Tokens
• 版本管理

原子設(shè)計(jì)

構(gòu)建組件庫，最基本的思維模式即原子設(shè)計(jì)（Atomic Design）。其實(shí)，這個(gè)概念并不新鮮，開發(fā)同學(xué)也有類似的思維模式。

1. 基本概念

考察代碼是否有條理，最好從命名開始。BEM（Block Element Modifier）是一種前端開發(fā)所用的模塊化命名方法，它能使代碼的可讀性更高，也更便于協(xié)作。BEM 將事物分為 3 個(gè)層級來命名：

Block

一個(gè)有獨(dú)立意義的實(shí)體，對標(biāo)原子設(shè)計(jì)中的分子（molecules），如：

• header
• container
• menu
• chackbox
• input

命名方式為添加一個(gè)句號作為前綴，如：.block。

Element

Block 的一部分，沒有獨(dú)立意義，對標(biāo)原子設(shè)計(jì)中的原子（atoms），如：

• menu item
• list item
• checkbox caption
• header title

命名方式為在 block 名后添加兩個(gè)下劃線，如：.block__elem。

Modifier

用來定義 block 或 element 的樣式、表現(xiàn)或狀態(tài)的元素，如：

• disabled
• highlighted
• checked
• fixed
• size big
• color yellow。

命名方式為在 block 或 element 后添加兩個(gè)破折號，如：

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

這里為熟悉前端的設(shè)計(jì)師舉一個(gè)實(shí)際案例，以了解如何用 BEM 來寫下圖所示的三個(gè)按鈕：

·

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; 
}

2. 具體實(shí)踐

設(shè)計(jì)同學(xué)不需要嚴(yán)格踐行開發(fā)同學(xué)的 BEM 命名方式，但其對頁面各元素的分類是值得參考的。

頁面結(jié)構(gòu)化

結(jié)構(gòu)化頁面的基本原則是：

• 方便檢索控件（Components）
• 方便編輯控件
• 清晰地傳達(dá)控件狀態(tài)

1. 基本概念

以 React 或 TypeScipt 為例，開發(fā)同學(xué)會(huì)讓每個(gè)控件都用一個(gè)文件夾來將其歸納，如：

src/components/Button/Button.tsx

·

2. 具體實(shí)踐

• 讓每個(gè)控件都用一個(gè)頁面（Page）來將其歸納
• 將控件按命名排序
• 用 emoji 來表示控件狀態(tài)

·

其中，「