#前端架构概述
##前端架构的核心
代码，流程，全面的测试，详细的文档
##CSS 代码组织和管理规范BEM，OOCSS，SMACSS，ACSS
##OOCSS两个原则: 分离结构和外观， 以及分离容器和内容。
##SMACSS方法:
基础: 如果不添加CSS类名， 标记会以什么外观呈现。
布局: 把页面分成 一些区域。
模块: 设计中的模块化、可复用的单元。
状态: 描述在特定的状态或情况下，模块或布局的显示方式。
主题: 一个可选的视觉外观层，可以让你更换不同主题。
##JSHint检查的规则：
- 强制 使用 === 和 !== 代替 == 和 !=
- 限制代码块嵌套深度
- 限制函数的参数数量
- 如果函数重复定义，发出警告
- 如果变量创建后未被使用，发出警告
##BB鸟规则时需遵循的规范：
- 只包含不可变的规则，而不是笼统的说明
- 总是把规则提炼成最简单的表达
- 总是首先说明规则是什么，再说明“ 如果不这样， 那么会如何”
- 每个规则必须包含以下词中的一个—— 总是、 永远 不要、 只有、 每一个、 不要、 要
##制定自己的设计系统的规则列表。
- 永远不要给布局的子内容强加内边距和元素样式。 布局只关注垂直对齐、 水平对齐 和文字 间距。 主题和别的数据属性值永远不要强制改变外观； 它们必须保持布局、 组件和元素可以应用于其上。
- 组件总是贴着它的父容器的四个边， 元素都没有上外边距和左外边距， 所有的最后 节点（最右边和最下边的节点）的外边距都会被清除。
- 组件本身永远不要添加背景、 宽度、 浮动、 内边距和外边距的样式， 组件样式是组件内元素的样式。
- 每个元素都有且只有一个唯一的且作用域只在组件内的CSS类名。 所有的样式都是直接应用到这个选择器上， 并且只有上下文和主题能修改元素的样式。
- 永远不要在元素上使用上外边距， 第一个元素总是贴着它所在组件的顶部。 JavaScript 永远不要绑 定任何元素的CSS类名， 选中元素通过数据属性实现。
##流程方法：
- 使用事件跟踪和用户故事来正确地跟踪工作流和标记那些完成了的任务。
- 搭建开发环境来测试代码。
- 构建部署流程，用于编译、 验证和测试代码。
- 在任何代码被采纳之前， 都要获取需求方的反馈。
- 把提交的代码推送到中心代码仓库。
- 采用这样一个部署系统：可以无缝地添加一些新代码到生产环境； 在需要的时候， 还可以回滚这些代码来恢复系统原来的功能。
##工作流:
- 需求
- 原型设计
- 程序开发
##视觉还原测试
Wraith:基于页面的比较
BackstopJS:基于组件的比较
Quixote:CSS单位测试
Gemini:基于无头浏览器的测试，基于桌面浏览器的测试。
CasperJS:包含脚本库文件
Diffux项目:基于图形用户界面的比较工具，支持更改确认
PhantomCSS:基于命令行的比较工具，支持更改确认
PhantomJS（ http:// phantomjs. org/）测试工具集是基于WebKit内核的无头浏览器， 它让你可以快速地渲染页面， 而更重要的是，还可以对页面进行截图。
PhantomJS是一个基于webkit的JavaScript API。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情，它都能做到。它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等。PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。
CasperJS（ http:// casperjs. org/）是一 个导航和脚本工具， 通过它你可以与PhantomJS 渲染师的页面进行交互。 我们能滑动鼠标、 单击、 在文本框中输入文字， 甚至在 DOM节点上直接调用JavaScript函数。
ResembleJS（ http:// huddle. github. io/ Resemble. js/）是一个比较引擎， 它可以对比两张图片， 并找出是否有像素级别的差异。
##文档核心。
Hologram,静态文档
SassDoc是基于Node的系统文档工具
Pattern Lab是多平台模式库工具