最近在拜读一本《前端架构设计》的书，该书讲到前端架构师的用户是开发人员。所选择的工具、编写的代码、创建的流程，都是为了让开发人员能够构建出最高效的、不出错的、可扩展的和可持续优化的系统。
一、HTML
1）标签规范化
div乱炖是指嵌套多层div元素。为了保持简洁，语义化的标签是首选，应用样式所依靠的是HTML5元素名称和它们的层级关系，在标记中没有类名，往往写出层级的后代选择器。
2）模块化方法
前端开发人员的工作就是把视觉语言拆解成最小单元。拆解之后，可以创建规则，对这些最小单元进行重组。转换的目标是创建具有可扩展性和可维护性的代码库，以便如实地重现视觉语言能表达的任何东西。
3）模块化CSS
1. OOCSS（Object-Oriented CSS，面向对象的CSS）
有两个主要的原则：分离结构和外观，以及分离容器和内容。
分离结构和外观：将视觉特性定义为可复用的单元。
分离容器和内容：不再将元素位置作为样式的限定词。
2. SMACSS（Scalable and Modular Architecture for CSS，模块化架构的可扩展CSS）
把样式系统划分为5个具体类别。
基础：不添加CSS类，标签会以什么外观呈现。
布局：把页面分成一些区域。
模块：设计中的模块化、可复用的单元。
状态：在特定的状态或情况下，模块或布局的显示方式。
主题：可选的视觉外观层，可以让你更换不同主题。
3. BEM（Block Element Modifier，块元素修饰符）
只是一个CSS类名的命名规则。每个元素带有如下内容，例如toogle__detail--active。
块名：所属组件的名称
元素：元素在块里面的名称
修饰符：任何与块或元素相关联的修饰符
二、CSS
1）特性之争与继承之痛
选择器优先级：重写一个选择器时，总是需要注意它的优先级。
颜色重置：再次指定样式，并且要覆盖当前的背景颜色。
位置依赖：如果移动位置，样式将会改变。
多重继承：改变主体或侧边栏的样式，都会影响呈现。
深层嵌套：样式来源增加到了四个。
2）有益的原则
1. 单一职责原则：必须有单一的、高度聚焦的理由。
.canlendar-header {
}
2. 单一样式来源：不仅每个CSS类名被创建为单一用途，而且每个标签的样式也只有单一的来源。将来源放在组件文件里，避免样式散落在其它组件文件里。
.canlendar-header { } .blog .canlendar-header { }
3. 组件修饰符：皮肤或子组件，能够定义一个组件在多个不同情况下的多种变化。修饰符的类名不再是父组件，而是组件本身的一部分。
.canlendar-header { } .canlendar-nested .canlendar-header { }
三、设计系统和工作流
1）设计系统的规则列表
1. 永远不要给布局的子内容强加内边距和元素样式。布局只关注垂直对齐、水平对齐和文字间距。
2. 主题和别的数据属性值永远不要强制改变外观；它们必须保持布局、组件和元素可以应用于其上。
3. 组件总是贴着它的父容器的四个边，元素都没有上外边距和左外边距，所有的最后节点的外边距都会被清除。
4. 组件本身永远不要添加背景、宽度、浮动、内边距和外边距的样式，组件样式是组件内元素的样式。
5. 每个元素都有且只有一个唯一的且作用域只在组件内的CSS类名。所有的样式都是直接应用到这个选择器上，并且只有上下文和主体能修改元素的样式。
6. 永远不要在元素上使用上外边距，第一个元素总是贴着它所在组件的顶部。
7 JavaScript永远不要绑定任何元素的CSS类名，选中元素通过数据属性实现。
2）现代工作流
1. 使用事件跟踪和用户故事来正确地跟踪工作流和标记那些完成了的任务。
2. 搭建开发环境来测试代码。
3. 构建部署流程，用于编译、验证和测试代码。
4. 在任何代码被采纳之前，都要获取需求方的反馈。
5. 把提交的代码推送到中心代码库。
6. 采用这样一个部署系统：可以无缝地添加一些新代码到生产环境；在需要的时候，还可以回滚代码还原系统。
3）现代的开发工作流
1. 需求
需求所面向的人群为：交互设计、视觉设计、后端开发以及前端开发人员。让四个领域的人员共同参与需求收集的过程，可以更早地发现需求中存在的问题和不足。
2. 原型设计
原型设计提供了一个讨论和反馈的公共空间，它把丰满的想法实现在桌面和移动浏览器中。在原型中，想法可以成型、摒弃、重拾、打磨。
3. 程序开发
开发人员的工作就是收集和处理来自数据库的数据，然后把它们放置到对应的标记上。
如果原型和网站共有一套CSS和JavaScript，那么开发人员应该完成一个功能完整、样式齐全、交互良好、响应及时、通过检查和达到标准的产品。测试人员可以根据原型设计来一步步地检验开发的内容。
4）任务处理器（gulp）
1. 安装需要的Ruby库
2. 编译Sass、合并JavaScript、加载第三方JavaScript库
3. 把SVG文件编译成图标字体
4. 对图片进行处理，减少文件体积，裁剪成各种尺寸
5. 同步到远程服务器
6. 运行可视化的回归测试
7. 自动生成浏览器厂商的前缀
8. 编译组件库
9. 优化Sass、CSS、JavaScript、JSON等
10. 基于JSON模式来验证数据
11. 启动Node和PHP服务器
12. 监听文件改动来刷新浏览器
四、测试核心和文档核心
1）视觉还原测试
1. 基于页面的比较，Wraith（https://github.com/BBC-News/wraith）
2. 基于组件的比较，BackstopJS（https://github.com/garris/BackstopJS）
3. CSS单位测试，Quixote（https://github.com/jamesshore/quixote）
4. 基于无头浏览器的测试，Gemini（https://github.com/gemini-testing/gemini）
5. 基于桌面浏览器的测试，Selenium服务器（https://www.seleniumhq.org/download）
6. 包含脚步库文件，CasperJS（http://casperjs.org）
7. 基于图形用户界面的比较工具，Diffux项目（https://github.com/diffux/diffux）
8. 基于命令行的比较工具，PhantomCSS（https://github.com/HuddleEng/PhantomCSS）
2）样式文档
SassDoc（http://sassdoc.com）可记录Sass的变量、混合、继承和函数的工具。
3）图形库
原子设计原则（http://patternlab.io）是一种构建网站设计系统的方法论。首先把网页常用元素分解成各个尺寸的模式，然后再描述这些模式组合成一个完整网页的方式。源自是构造网站、标题、样式、图片和表单元素的基本结构单元。在网页设计中，分子可能代表一个搜索表单、媒体块或导航栏。
posted on
