而Web前端开发，由于涉及到的内容较广，又不太可能完全具备后端语言的优秀特性。所以，更加需要开发人员具有优秀的设计和管理思想，比如：CSS的合理命名和管理、有效利用CSS预处理器、Java的模块化、框架的特性（比如AngularJS的依赖注入，指令）、以及组件化等等。

　　组件化其实是大型软件开发中的一个共识，特别是前端，在没有统一标准的前提下，大家都在不断的造轮子，有无数的人倒了下去，又有无数勇士踩着前者的尸体冲上来。也许是因为它确实能够具有一些非常优秀的特性：单一的职责、资源的高内聚、独立的作用域、可独立的测试、接口的规范化、可重用、可组合等。

　　我们项目的代码组织结构

　　从“风格指南”到“驱动开发”

　　总结一下前面的内容，“前后端分离”，“在线风格指南”，“组件化开发”，似乎我们只说到一些与开发相关的事情，其实不然。

　　“在线风格指南”被开发，UX、BA共享，合理的组件划分可以合理控制开发闭环，UX可以更快的看到设计实现的原型，提升团队成员沟通频率，BA可以方便的根据组件合理的编写Story（故事卡）。

　　当这三个角色都参与到这个过程当中时，我们就真正回到今天的正题“风格指南驱动开发”。

　　这是一个相当新的术语，但不是我发明的，如果要追溯的话，最早在公开场合中谈到这个概念的人应该是Nicole Sullivan，她在2014年9月的一次演讲《Components & SGDD》中提出（Nicole Sullivan目前在NPM这家公司，没错，就是那个NPM，做Product Manager & Design Manager）。

　　“风格指南驱动开发”尝试着：

让UX和前端开发更紧密的工作在一起，将设计与前端开发的工作闭环缩小，更快速的迭代产品原型。

将UI开发和业务系统分离开，业务系统不仅仅是指后端系统（不仅仅是前后端分离），也包括业务的Web系统。

让设计文档更加“灵活”，更加及时（up to date），更加一致（single source of truth）。

让前端资源管理更加规范，开发模式更加清晰。

让整个Web开发周期更加敏捷（Agile）。

　　它是一种前端开发和团队工作方式的实践。工作流程 - 如何“驱动开发”？

　　开发流程

　　怎么样的工作方式，才算“风格指南驱动开发”？其实，当团队拥有了“组件化的思想”和“在线风格指南”，“风格指南驱动开发”的整个过程其实是行云流水的，我简单描述一下：

　　1.挖掘到新的需求/特性

　　当新的需求出现时，UX开始进行页面设计，Living Style Guide会作为设计的参考文档。通常情况，设计师会查看已有的调色板、字体和其他基本元素或组件来组成新的页面布局。在组件化的思想和Living Style Guide的帮助下，BA和设计师都会尝试使用或者扩展现有的组件。

　　2.抽象成组件

　　一旦设计完成，BA、UX和开发会开始讨论如何把新的设计细分为独立的组件，哪些是已经存在可以重用的，哪些是新的需用新建或者扩展实现的。Living Style Guide作为桥梁帮助设计与开发进行沟通，促进双方的理解，确保实现的准确性。而抽象出来的组件，帮助BA划分任务和故事（Story），以便更加准确的估算“故事点”。

　　3.实现和文档化

　　此时，Living Style Guide是作为一个开发框架和设计试验场（playground）。

　　作为一个试验场（playground），允许你随时看到每一个开发出来的组件，j2直播，作为开发框架，允许你快速开发，atv直播，它和真正的产品实现完全隔离，这种隔离会鼓励你以更加抽象的方式创建组件，以便于让他们更容易被重用。

　　Living Style Guide的开发注重组件化的隔离和规范化的开发流程（套路清晰明了），我们常常会开发一些自动化的构建任务来帮助快速初始化一个组件需要的基本内容，只要开发人员对开发所需的前端技术栈有掌握，就能较快速的开发完成相应的组件。

　　而开发完成的组件在Living Style Guide中立刻变成“活的文档”，可以快速展示各种不同的组件应用场景，提供给UX和BA做审查（review）。

　　4.组件在产品应用中的热插拔