每篇写完，删了又删，只想再简单点、再少点，希望能快速看完，并能产生共鸣。
Web重构，选择好基础的框架/库、模块组件，合理分布静态资源，处理好标签和属性语义，基于OOP分离分割各代码，注意样式声明方式，页面结构必能合理，性能必能得到提升，可复用性、可伸缩性、可维护性显然得到实现，各种优点和好处，都是前期统筹和规范操作带来的，让优良之处成为一种习惯，而不是刻意为之。
Web重构笔记(11): 样式预处理与样式声明
Web重构笔记(9): 栅格结构
页面由几个主干结构支撑和区分，主干结构(Site/Page)内部由多个区块(Section)组成的布局，区块作为弹性布局或定宽布局的钩子，可以实现通栏背景。区块内部则是栅格列(Grid)，格子列里是各模块(Module)和组件(Component)，各模块和组件可有边框、内外边距。
Web重构笔记(8): 主干结构
前面章节方法论，从本章节开始实践。
布局中的层级关系，主要体现在主干结构、栅格结构、组件模块结构三部分，本篇讲主干结构。
主干结构按级别分成“站点”和“页面”，即site和page。如电商或门户站点，站点有统一的头尾、悬浮挂件，站点有很多不一样的子站和栏目。
Web重构笔记(7): 样式、结构、行为分离分割
Web重构工作主要是语义化排版文档信息，排版文档信息的最佳实现就是基于OOP分离分割结构、样式、行为。
分离分割皆为解耦。
分离，使HTML、CSS、JavaScript三基石职责清晰，HTML逻辑化内容，CSS视觉呈现，JavaScript承载控制、驱动、交互；
分割就是模块化、组件化，对系统各业务各功能按一定粒度进行分割、解耦、独立处理，减少冗余，提升可靠性、统一性、复用性、扩展性、维护性。
Web重构笔记(6): 语义化
语义化概念：通过丰富的语义关系对数据进行逻辑化描述，便于数据人机可读、检索挖掘和共享交换，实现信息处理的自动化和智能化；即人类提供良好结构的、作为人能识别的数据给机器，让不同机器能准确高效的意会和处理数据反馈给人类。
语义化实现方案有多种，如RDF、RDFa、Microformats、Microdata等规范，虽其复杂性、数据模型、属性类型等特性不尽相同，但都支持HTML5语言，项目如有特定需求可采用相关规范，实现丰富的语义关系。本篇Web语义化仅从HTML5语言标准下的“标签语义”和“属性命名语义”两部分展开。
Web重构笔记(5): 搭建工程目录
Web重构搭建工程目录，即是合理分布项目静态资源。
目录和文件名，只能是英文、数字和-字符组成，名称不宜过长和生涩，不加排序前缀，干扰阅读和查找文件名，层级不宜过深，这样便于后期维护调整，交付后端程序清晰明了。
组织目录和文件，处理好两个点：一是设计模式框架中类型，二是业务功能；
Web重构笔记(4): 切图与标注
本篇讲从设计稿中提取基础资源和信息：切图与标注。
Web重构笔记(3): Web重构前的分析
本篇讲重构前的分析。从“工作状态、工作环境和工作角色”和具体重构工作两方面分析。