摘要：創(chuàng)建可維護(hù)的設(shè)計規(guī)范為什么需要相信團(tuán)隊工作中，不管是前端還是設(shè)計師都有被視覺統(tǒng)一問題折磨過的美好經(jīng)歷。所以在這，我先略過視覺稿，直接來說如何創(chuàng)建一分靈活可維護(hù)的設(shè)計規(guī)范。

相信團(tuán)隊工作中，不管是前端還是設(shè)計師都有被 “視覺統(tǒng)一問題” 折磨過的美 (dan) 好 (teng) 經(jīng)歷。特別是在中大型、復(fù)雜的 web 項目中，很可能存在以下問題（你能對號入座幾個呢⊙﹏⊙‖）：

整個項目有上百種不同的顏色。但其中大部分顏色的 16 進(jìn)制值卻非常接近。原因在于，開發(fā)甚至設(shè)計師使用吸管工具提取顏色值，這很容易照成誤差。

不同的開發(fā)，對組件的命名可能不一樣，比如按鈕，有 ‘btn’、有 ‘button’ 等等。加上第一點的問題，造成 css 中諸多長得差不多，但不能復(fù)用的代碼。

不同的設(shè)計師，風(fēng)格也不相同，同一個表單今天是這個樣子，明天它媽都不認(rèn)識了。而苦逼的開發(fā)，要重新還原設(shè)計稿。


整個站點的交互，色彩，看上去總是不那么協(xié)調(diào)。
顯然，如果沒有一個設(shè)計規(guī)范（Style Guide），項目會越來越難以拓展，不可維護(hù)。那么制定一個設(shè)計規(guī)范就很有必要了。

一個合格的設(shè)計規(guī)范，至少需要滿足 3 個方面，以下我以 github 的設(shè)計規(guī)范 Primer 為示例，一個個說：

1. 色彩風(fēng)格

一個具備美感的網(wǎng)站，并不是色彩越多樣越好，我們一般需要定義網(wǎng)站多主色調(diào)。
重要的是，定義好色值后，就愉快的可以用 sass 之類的 css 預(yù)編譯，設(shè)置變量了。 (＝^ω^＝)

比如 github 多主色調(diào)，是藍(lán)色

2. 組件化

設(shè)計規(guī)范應(yīng)該定義出 web 項目常用的組件：比如 按鈕、 彈框、表單、側(cè)欄、導(dǎo)航等等。以便復(fù)用 (關(guān)鍵是設(shè)計時就要復(fù)用)。

3. 使用文檔

定義好設(shè)計風(fēng)格和各種組件后，要做的就是讓各位開發(fā)和設(shè)計童鞋按規(guī)范使用了。 使用文檔必須寫明色彩具體值、組件的結(jié)構(gòu)、css 命名等，如果有 js 組件，也要寫好 js 的 api 文檔。

Style Guide 確實有價值，但也需要一定成本（構(gòu)建成本、維護(hù)成本、推廣及學(xué)習(xí)成本）。那什么情況下需要自己創(chuàng)建 Style Guide？我們可以假設(shè)幾個場景：

你在一個靈活敏捷的小型創(chuàng)業(yè)團(tuán)隊，產(chǎn)品迭代快，變動大。（規(guī)范跟不上變化）

你一個人或者就幾個人負(fù)責(zé)一個項目，凡事可以隨時當(dāng)面溝通。（溝通成本小）

你的項目偏向展示性，內(nèi)容絢麗多樣，定制化強(qiáng)。（組件復(fù)用性低）

簡單來說，如果創(chuàng)建自己的 Style Guide ，成本大于效益，那我們就沒必要大費周折搞這些了。
另外，很多時候我們可以直接用 第三方 UI 庫 （碼農(nóng)福音 ￣▽￣），它們的文檔其實就是一份 Style Guide。而且文檔完善，考慮周全，易于學(xué)習(xí)。比如 Ant Design、Element、Angular Material 等等

到這，你還覺得有必要自己創(chuàng)建一份 Style Guide 的話，請繼續(xù)往下看。

按說設(shè)計規(guī)范應(yīng)該由設(shè)計師和產(chǎn)品一起定制好視覺稿，前端?們再根據(jù)視覺稿書寫規(guī)范。所以在這，我先略過視覺稿，直接來說如何創(chuàng)建一分靈活可維護(hù)的設(shè)計規(guī)范（Living Style Guide）。

我們需要 node 環(huán)境 , 以及 kss 這個工具。kss 可以根據(jù) css 里面的注釋，生成 Style Guide 的文檔。

簡單說下用法：
第一步，先安裝 kss

npm installl -g kss

第二步，創(chuàng)建一個文件夾，然后下載 kss 的 demo。

mkdir kss-demo
cd kss-demo
git init 
git clone https://github.com/kss-node/kss-node.git

安裝依賴

npm install 

然后打開 demo 文件夾，我們可以看到如下結(jié)構(gòu)，kss 就是根據(jù)里面的配置內(nèi)容，生成 Style Guide

demo 
     - components // 定義組件
        - buttons.hbs   // 編寫 html 示例結(jié)構(gòu)
        - buttons.less  // 編寫組件樣式
     - forms   // 定義組件 
     - homepage.md  // 文檔規(guī)范內(nèi)容 支持 markdown
     - kss-config.json  // 配置文件
     - kss-headings.less    // 規(guī)范文檔的樣式
     - mixins   // less 方法
     - preview.png
     - styles.css  
     - styles.less  

我們可以用 demo 來改動下，文件夾改名為 my-style-guide (隨意) 做成我們自己想要的內(nèi)容，然后

kss --source my-style-guide

kss 工具就會幫你創(chuàng)建一個styleguide文件夾。里面是 Style Guide 的內(nèi)容了。配置跟生成出來的內(nèi)容，關(guān)系如下（簡單畫畫圖，詳細(xì)內(nèi)容，請下載研究）。

less(當(dāng)然 css 和 sass 也可以) 里面的：

注釋 =>  編譯成文檔說明

less 的樣式 => 組件的樣式（button 等）

hbs 文件里的內(nèi)容 => 組件的結(jié)構(gòu) (使用了 handlebars 模板引擎)

這么一來，簡單的 Living Style Guide 就創(chuàng)建好啦（鼓掌）。
另外 github 上也復(fù)雜些的 kss 相關(guān)模板。
kss-node-template、 kss-node-template-such-as-github

不過真正項目里，應(yīng)該如何定義色彩、風(fēng)格之類的呢。這就要找設(shè)計師啦。哈哈哈。

在嘗試性使用 kss 的過程中，個人感覺有些不足之處，或者說麻煩之處。
比如 kss 生成的文檔說明，全部寫在 css 里，并且要遵循 kss 的語法，而在 css 里寫 Markdown ，也蛋疼。這增加了學(xué)習(xí)和編輯的成本。
kss 中 Style Guide 的組件結(jié)構(gòu)，需要寫在另一個文件，還用了模板引擎，這樣維護(hù)起來不方便。
在和團(tuán)隊童鞋探討之后，我們決定放棄使用 kss，不過他提出了個簡單版思路，有興趣的童鞋可以嘗試下：

大部分的文檔內(nèi)容用 md 來編寫，組件的結(jié)構(gòu)寫在該 md 文檔的 code 里，css 則跟 md 文檔同名， 這樣，工具就可以根據(jù)文件名為索引，生成對應(yīng)的 html 文件，再組織這些生成的文件，拼成完整 Style Guide。
比如：
components // 定義組件
  |----buttons.md   // 編寫 html 示例結(jié)構(gòu)，和文檔
  |----buttons.css  // 編寫組件樣式

這樣，寫起來舒服，維護(hù)起來也舒服些。如果大家有更好的思路方案，歡迎拍磚探討！

周末大放送：
最后，給設(shè)計師童鞋們推薦個可以根據(jù)設(shè)計稿，從 Sketch 生成 Style Guide 的插件。一樣牛逼烘烘！

Craft 是一套面向 Sketch 和 Photoshop 的插件組，幫助你簡化設(shè)計流程中的自動化填充，提升工作流效率，將注意力集中在設(shè)計本身。作為一個工具套件，Craft 包含下列工具：

批量復(fù)制：快速復(fù)制重復(fù)圖層，并方便調(diào)節(jié)間距、數(shù)量等。

樣式庫：在 Sketch 中生成一個 StyleGuide。它使一個新的頁面有不同的調(diào)色板，字體，文本樣式和自定義元素，您可以建立自己。與你的團(tuán)隊分享和同步整個庫。

智能圖庫：支持 Dropbox，unsplash，本地文件夾，或 Web 頁面上調(diào)取圖片到 Sketch 畫板中。

數(shù)據(jù)：帶來真正的文本，圖像，JSON 等內(nèi)容到你的 Sketch，無需花費時間進(jìn)行模擬數(shù)據(jù)。

其中的樣式庫功能，就可以方便的生成 Style Guide:

另外這款插件絕不是一個內(nèi)容生成器那么簡單。它可以幫助你擺脫「Lorem Ipsum」，使用真實的產(chǎn)品數(shù)據(jù)進(jìn)行設(shè)計，這對設(shè)計師來說簡直太重要了！具體的操作辦法可以去他們的 官網(wǎng) 看視頻教程。