建立可维护的设计规范（Living Style Guide）

建立可维护的设计规范（Living Style Guide）

为何须要 Style Guide

相信团队工做中，不论是前端仍是设计师都有被 “视觉统一问题” 折磨过的美 (dan) 好 (teng) 经历。特别是在中大型、复杂的 web 项目中，极可能存在如下问题（你能对号入座几个呢⊙﹏⊙‖）：

1. 整个项目有上百种不一样的颜色。但其中大部分颜色的 16 进制值却很是接近。缘由在于，开发甚至设计师使用吸管工具提取颜色值，这很容易照成偏差。

2. 不一样的开发，对组件的命名可能不同，好比按钮，有 ‘btn’、有 ‘button’ 等等。加上第一点的问题，形成 css 中诸多长得差很少，但不能复用的代码。

3. 不一样的设计师，风格也不相同，同一个表单今天是这个样子，明天它妈都不认识了。而苦逼的开发，要从新还原设计稿。

4. 整个站点的交互，色彩，看上去老是不那么协调。

   显然，若是没有一个设计规范（Style Guide），项目会愈来愈难以拓展，不可维护。那么制定一个设计规范就颇有必要了。

Style Guide 应该是什么样子

一个合格的设计规范，至少须要知足 3 个方面，如下我以 github 的设计规范 Primer 为示例，一个个说：

1. 色彩风格

一个具有美感的网站，并非色彩越多样越好，咱们通常须要定义网站多主色调。
重要的是，定义好色值后，就愉快的能够用 sass 之类的 css 预编译，设置变量了。 (＝^ω^＝)

好比 github 多主色调，是蓝色

2. 组件化

设计规范应该定义出 web 项目经常使用的组件：好比 按钮、 弹框、表单、侧栏、导航等等。以便复用 (关键是设计时就要复用)。

3. 使用文档

定义好设计风格和各类组件后，要作的就是让各位开发和设计童鞋按规范使用了。 使用文档必须写明色彩具体值、组件的结构、css 命名等，若是有 js 组件，也要写好 js 的 api 文档。

须要本身建立 Style Guide 吗

Style Guide 确实有价值，但也须要必定成本（构建成本、维护成本、推广及学习成本）。那什么状况下须要本身建立 Style Guide？咱们能够假设几个场景：

1. 你在一个灵活敏捷的小型创业团队，产品迭代快，变更大。（规范跟不上变化）

2. 你一我的或者就几我的负责一个项目，凡事能够随时当面沟通。（沟通成本小）

3. 你的项目偏向展现性，内容绚丽多样，定制化强。（组件复用性低）

简单来讲，若是建立本身的 Style Guide ，成本大于效益，那咱们就不必大费周折搞这些了。
另外，不少时候咱们能够直接用 第三方 UI 库 （码农福音 ￣▽￣），它们的文档其实就是一份 Style Guide。并且文档完善，考虑周全，易于学习。好比 Ant Design、Element、Angular Material 等等

到这，你还以为有必要本身建立一份 Style Guide 的话，请继续往下看。

建立 Living Style Guide

按说设计规范应该由设计师和产品一块儿定制好视觉稿，前端?们再根据视觉稿书写规范。因此在这，我先略过视觉稿，直接来讲如何建立一分灵活可维护的设计规范（Living Style Guide）。

咱们须要 node 环境 , 以及 kss 这个工具。kss 能够根据 css 里面的注释，生成 Style Guide 的文档。

简单说下用法：
第一步，先安装 kss

npm installl -g kss

第二步，建立一个文件夹，而后下载 kss 的 demo。

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

安装依赖

npm install

而后打开 demo 文件夹，咱们能够看到以下结构，kss 就是根据里面的配置内容，生成 Style Guide

demo 
     - components // 定义组件
        - buttons.hbs   // 编写 html 示例结构
        - buttons.less  // 编写组件样式
     - forms   // 定义组件 
     - homepage.md  // 文档规范内容 支持 markdown
     - kss-config.json  // 配置文件
     - kss-headings.less    // 规范文档的样式
     - mixins   // less 方法
     - preview.png
     - styles.css  
     - styles.less

咱们能够用 demo 来改动下，文件夹更名为 my-style-guide (随意) 作成咱们本身想要的内容，而后

kss --source my-style-guide

kss 工具就会帮你建立一个styleguide文件夹。里面是 Style Guide 的内容了。配置跟生成出来的内容，关系以下（简单画画图，详细内容，请下载研究）。

less(固然 css 和 sass 也能够) 里面的：

1. 注释 => 编译成文档说明

2. less 的样式 => 组件的样式（button 等）

3. hbs 文件里的内容 => 组件的结构 (使用了 handlebars 模板引擎)

这么一来，简单的 Living Style Guide 就建立好啦（鼓掌）。
另外 github 上也复杂些的 kss 相关模板。
kss-node-template、 kss-node-template-such-as-github

不过真正项目里，应该如何定义色彩、风格之类的呢。这就要找设计师啦。哈哈哈。

在尝试性使用 kss 的过程当中，我的感受有些不足之处，或者说麻烦之处。
好比 kss 生成的文档说明，所有写在 css 里，而且要遵循 kss 的语法，而在 css 里写 Markdown ，也蛋疼。这增长了学习和编辑的成本。
kss 中 Style Guide 的组件结构，须要写在另外一个文件，还用了模板引擎，这样维护起来不方便。
在和团队童鞋探讨以后，咱们决定放弃使用 kss，不过他提出了个简单版思路，有兴趣的童鞋能够尝试下：

大部分的文档内容用 md 来编写，组件的结构写在该 md 文档的 code 里，css 则跟 md 文档同名， 这样，工具就能够根据文件名为索引，生成对应的 html 文件，再组织这些生成的文件，拼成完整 Style Guide。
好比：

• components // 定义组件
  |----buttons.md // 编写 html 示例结构，和文档
  |----buttons.css // 编写组件样式

这样，写起来舒服，维护起来也舒服些。若是你们有更好的思路方案，欢迎拍砖探讨！

周末大放送：
最后，给设计师童鞋们推荐个能够根据设计稿，从 Sketch 生成 Style Guide 的插件。同样牛逼烘烘！

Craft 简介

Craft 是一套面向 Sketch 和 Photoshop 的插件组，帮助你简化设计流程中的自动化填充，提高工做流效率，将注意力集中在设计自己。做为一个工具套件，Craft 包含下列工具：

• 批量复制：快速复制重复图层，并方便调节间距、数量等。

• 样式库：在 Sketch 中生成一个 StyleGuide。它使一个新的页面有不一样的调色板，字体，文本样式和自定义元素，您能够创建本身。与你的团队分享和同步整个库。

• 智能图库：支持 Dropbox，unsplash，本地文件夹，或 Web 页面上调取图片到 Sketch 画板中。

• 数据：带来真正的文本，图像，JSON 等内容到你的 Sketch，无需花费时间进行模拟数据。

其中的样式库功能，就能够方便的生成 Style Guide:

另外这款插件毫不是一个内容生成器那么简单。它能够帮助你摆脱「Lorem Ipsum」，使用真实的产品数据进行设计，这对设计师来讲简直过重要了！具体的操做办法能够去他们的 官网 看视频教程。