前端架构是一系列工具和流程的合集，旨在提升前端代码的质量，并实现高效、可持续的工作流。
工作职责：
体系设计——清晰描绘产品和代码的最终形态
工作规划——制定完整开发工作流
监督跟进——保证项目高效率完成
前端架构四个核心：
代码——如何实现系统架构中的HTML,CSS,Javascript
流程——构建高效并且防止出错的工作流所需要的工具和流程
测试——为网站搭建稳固基础
文档——规划好系统设计的蓝图
OOCSS方法
两个重要原则：分离结构和外观（将视觉特性定义为可复用单元），分离容器和内容（不再将元素位置作为样式的限定词）
SMACSS方法
将样式系统划分为以下5个具体的类别
基础： 如果不添加CSS类名，标记会以什么外观呈现
布局：把页面分为一些区域
模块：设计中的模块化，可复用的单元
状态： 描述在特定的状态或情况下，模块或布局的呈现方式
主题：一个可选的视觉外观层，在不同主题下标记的呈现
单一职责原则，规定你创建的所有东西必须有单一的、高度聚焦的理由。
单一样式来源，每个标签的样式只有唯一的样式来源，如果样式散落在多个文件各个角落里，维护修改起来将会非常困难
避免CSS样式发生“最高优先级”争夺赛
永远不要给布局的字内容强加内边距和元素样式，布局只关注垂直对齐、水平对齐和文字间距。
主题和别的数据属性值永远不要强制改变外观，他们必须保持布局、组件和元素可以应用于其上
组卷总是贴着它的父容器的四个边，元素都没有上外边距和左外边距，所有的最后节点（最右边和最下边的节点）的外边距都会被清除
组件本身永远不要添加背景，宽度，浮动，内边距和外边距的样式，组卷样式是组件内元素的样式
每个元素都有且只有一个唯一的作用域只在组件内的CSS类名，所有的样式都是直接应用到这个选择器，并且只有上下文和主题能修改元素样式
永远不要在元素上使用上外边距，第一个元素总是贴着它所在的组件顶部
Javascript永远不要绑定任何元素的CSS类名，选中元素通过数据属性实现
测试驱动的设计，在动手编写具体代码之前，先写好一套测试用例，用来描述代码应完成什么样的功能，随着功能的完善，测试通过，功能完成。
模式驱动的设计系统
为了追求极致的界⾯面响应效率，需要尽可能的提⾼高程序资源的加载速度，资源加载将深⼊入影响web前端系统的运⾏方式，因此web前端架构设计要充分考虑资源加载与管理的问题。
充分考虑资源加载与管理
1. 按需：最小化增量加载资源
2. 合并：提高多个资源加载的总体速度
3. 缓存：充分利用浏览器缓存实现媲美本地应用的响应速率