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

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

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

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

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


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

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

1. 色彩風(fēng)格

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

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

2. 組件化

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

3. 使用文檔

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

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

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

你一個(gè)人或者就幾個(gè)人負(fù)責(zé)一個(gè)項(xiàng)目，凡事可以隨時(shí)當(dāng)面溝通。（溝通成本?。?/p>
你的項(xiàng)目偏向展示性，內(nèi)容絢麗多樣，定制化強(qiáng)。（組件復(fù)用性低）

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

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

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

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

簡(jiǎn)單說下用法：
第一步，先安裝 kss

npm installl -g kss

第二步，創(chuàng)建一個(gè)文件夾，然后下載 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 來改動(dòng)下，文件夾改名為 my-style-guide (隨意) 做成我們自己想要的內(nèi)容，然后

kss --source my-style-guide

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

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

注釋 =>  編譯成文檔說明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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