工程化、模块化、和组件化分别是什么？
工程化
最基础的工程化思想就是将页面的结构、样式和动作分离，工程化是一种思想而不是某种技术，用做工程的思维看待和开发自己的项目，而不是直接撸起袖子一个页面一个页面开些；要盖一栋大楼，假如我们不进行工程化的考量那就是一上来掂起瓦刀、砖块就开干，直到把大楼垒起来，这样做往往意味着中间会出现错误，要推倒重来或是盖好以后结构有问题但又不知道出现在哪谁的责任甚至会在某一天轰然倒塌，那我们如果用工程化的思想去做，就会先画图纸、确定结构、确定用料和预算以及工期，另外需要用到什么工种多少人等等，我们会先打地基再建框架再填充墙体这样最后建立起来的高楼才是稳固的合规的，什么地方出了问题我们也能找到源头和负责人。
模块化（功能模块比如btn）
工程化是一个更高层次的思想，那么组件化和模块化就是工程思想下相对具体的开发方式；模块化就是假设需要在A页面写一个样式或者功能，这个功能还需要在项目的其他位置使用，这时候把这个功能分离出来编写，实现复用还可以分而治之，
组件化（页面的一部分 如header/footer）
页面上每个独立的、可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护；
组件具有独立性，因此组件与组件之前可以自由组合；
页面只不过是组件的容器，负责组合组件行程功能完成的界面；
当不需要某个组件，可以替换或者删除；
组件化将页面视为一个容器，页面上各个独立部分例如：头部、导航、焦点图、侧边栏这些都视为组件，不同的页面根据内容的需要，去盛放相关组件就可以组成完成的页面。
模块化和组件化的好处就是复用。除了复用还有个好处就是分治，我们可以在不影响其他代码的情况下按需求修改某一独立的模块或是组件；
3、常见问题：
如果CSS代码量比较庞大的，会出现这么几个问题：
1、无法快速确切的知道一个类的作用；
2、无法快速确定一个类在哪里被使用；
3、新增一个类是否会造成冲突；
为了解决以上问题，可以将页面的每一个功能模块（）作为一个独立的组件，然后对组件的内容进行合理的命名（比如BUTTON），从而有助于确定一个CSS代码和相关页面结构的功能，
SASS文件组织
CSS预处理器的特点之一是可以把你的代码分割成很多个文件，而且不会影响性能。这都要归功于Sass的@import命令，只要在你的开发环境下，你调用不管多少文件，最终将编译出一个CSS样式文件。 多个文件中开发，最终合并输出一个文件
为什么要创建文件夹？
在家里，你也不会把所有的纸张放在一个盒子里。你可能会使用一个文件夹。一个用于房子上，一个用于银行，一个用于账单等等。 你在创建CSS的架构的时候也应该如此：你不只是把所有的Sass文件放在一个文件夹下，你会将他们分类。
4.解决方案
项目中都会包括几个常用的文件目录：
css：主要放置.css文件
js：主要放置.js文件
images：主要放置图片文件
html：主要放置.html或.php之类文件（我一般喜欢直接放在项目根录下
5、编码实战
6、扩展思考
7、参考文献
http://www.w3cplus.com/preprocessor/architecture-sass-project.html
http://www.w3cplus.com/preprocessor/how-to-create-project-with-sass.html
http://www.softwhy.com/article-25-1.html
问题：
1、组件化后，一个文件夹一个组件，最后怎么把组件拼接起来？
使用gulp之类打包工具。
2、scss文件分类，文件夹究竟怎么设立最好呢？
根据实际的开发需要来决定，但是大体的结构要有的，并且不能随意更改；
3、模块和组件算不算一样的做法
模块可以是组件（button按钮之类的），也可以被组件包裹；模块主要指js方面，组件，一般是指可视化的区域