创建可维护的设计规范（生活风格指南）为什么需要风格指南？相信在团队合作中，无论是前端还是设计师，都曾被“视觉统一问题”折磨过美（dan）好（teng）的体验。尤其是在中大型复杂的web项目中，很可能会出现以下问题（你能打卡几个？⊙﹏⊙‖）：整个项目有上百种不同的颜色。但是这些颜色中的大多数的十六进制值都非常接近。原因是开发人员甚至设计师使用吸管工具来提取颜色值，这很容易出错。不同的开发可能对组件有不同的名称，比如按钮，有'btn'，'button'等。除了第一点的问题，还有很多css中的代码看起来很相似但是不能复用。不同的设计师有不同的风格。同一个表格今天看起来是这样，明天就认不出来了。对于硬开发，需要还原设计稿。整个场地的互动，色彩，总是显得格格不入。显然，如果没有设计规范（StyleGuide），项目将变得越来越难以扩展和不可维护。那么就需要制定设计规范。风格指南应该是什么样的？一份合格的设计规范至少需要满足3个方面。我以github的设计规范Primer为例一一说：1.颜色风格一个美观的网站，并不意味着颜色越多样化越好。那么，我们一般需要为网站定义多种主色。重要的是，定义好颜色值后，就可以愉快地用sass、setvariables等css进行预编译了。(＝^ω^＝)比如github有多个主色，就是蓝色2.组件设计规范应该定义web项目常用的组件：比如按钮，弹出框，表单，侧边栏，导航，etc.为了复用（关键是在设计时复用）。3、使用文档定义好设计风格和各种组件后，接下来要做的就是让大家按照规范来开发设计童鞋了。使用文档一定要写明颜色的具体值，组件的结构，css名称等，如果有js组件，js的api文档也要写好。需要自己创建风格指南吗？StyleGuide确实有价值，但也需要一定的成本（建设成本、维护成本、推广和学习成本）。那么什么时候需要自己创建样式指南呢？我们可以假设几个场景：你在一个小而灵活的创业团队中，产品迭代快，变化大。（规格跟不上变化）你一个人或几个人负责一个项目，随时可以面对面交流。（传播成本低）您的项目偏于展示，内容丰富多彩，定制化强。（低组件可重用性）简单地说，如果创建自己的样式指南成本大于收益，那么我们不需要费那么大劲去做。另外很多时候我们可以直接使用第三方UI库（码农福音￣▽￣），他们的文档其实就是一个StyleGuide。它有据可查、经过深思熟虑并且易于学习。例如AntDesign、Element、AngularMaterial等，如果你还觉得有必要自己创建一个StyleGuide，请继续阅读。打造LivingStyleGuide，据说需要设计师和产品一起定制设计规范，前端人员根据视觉稿写规范。所以在这里，我将跳过视觉草案，直接谈谈如何创建一个灵活且可维护的设计规范（LivingStyleGuide）。我们需要node环境和kss工具。kss可以根据css中的注释生成StyleGuide文档。简单说一下使用方法：第一步，先安装kssnpminstalll-gkss第二步，创建一个文件夹，然后下载kssdemo。mkdirkss-democdkss-demogitinitgitclonehttps://github.com/kss-node/kss-node.git安装依赖npminstall然后打开demo文件夹，我们可以看到如下结构，kss是基于Content里面的配置，生成StyleGuidedemo-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来改变文件夹nametomy-style-guide(optional)制作我们想要的内容，然后kss--sourcemy-style-guidekss工具会帮你创建一个styleguide文件夹。里面是风格指南的内容。配置与生成内容关系如下（简单画图，具体请下载研究）。在less中（当然css和sass也可以）：注释=>编译成文件解释less的样式=>组件的样式（按钮等）hbs文件中的内容=>结构像这样的组件（使用车把模板引擎）来吧，创建了一个简单的生活风格指南（掌声）。另外github上也有比较复杂的kss相关模板。kss-node-template,kss-node-template-such-as-github但是在实际项目中，我们应该如何定义颜色，样式等等。是时候找设计师了。哈哈哈。在尝试使用kss的过程中，个人感觉还是有一些不足，或者说麻烦。比如kss生成的文档都是用css写的，必须遵循kss的语法，用css写Markdown很痛苦。这增加了学习和编辑的成本。kss中StyleGuide的组件结构需要写在另外一个文件中，并且使用模板引擎，维护起来不方便。和团队童鞋讨论后，我们决定放弃使用kss，但是他提出了一个简单版的想法，感兴趣的童鞋可以试试：文档内容大部分写在md中，组件结构写在md文档的代码这里css与md文件同名，所以工具可以根据文件名索引生成对应的html文件，然后将这些生成的文件组织起来形成一个完整的StyleGuide。例如：components//定义组件|----buttons.md//写html示例结构，文档|----buttons.css//写组件样式，写起来舒服，维护起来舒服。如果您有更好的想法，欢迎拍砖讨论！周末赠送：最后推荐一款设计师童鞋插件，可以根据设计稿从Sketch生成StyleGuide。一样棒！Craft简介Craft是一套Sketch和Photoshop的插件，帮助你简化设计过程中的自动填充，提高工作流程效率，专注于设计本身。作为一个工具套件，Craft包括以下工具：BatchCopy：快速复制重复图层，轻松调整间距、数量等。StyleLibrary：在Sketch中生成StyleGuide。它使用不同的调色板、字体、文本样式和您可以自己构建的自定义元素创建一个新页面。与您的团队共享和同步整个库。智能图库：支持Dropbox、unsplash、本地文件夹，或从网页调用图片到Sketchboard。数据：将真实的文本、图像、JSON等带入您的Sketch，而无需花费时间模拟数据。样式库功能可以轻松生成StyleGuide：另外，这款插件绝非内容生成器那么简单。它可以帮助你摆脱“LoremIpsum”，用真实的产品数据进行设计，这对设计师来说太重要了！具体操作方法可以去他们官网看视频教程。
