工程化、模塊化、和組件化分別是什么？
工程化
最基礎的工程化思想就是將頁面的結構、樣式和動作分離，工程化是一種思想而不是某種技術，用做工程的思維看待和開發自己的項目，而不是直接擼起袖子一個頁面一個頁面開些；要蓋一棟大樓，假如我們不進行工程化的考量那就是一上來掂起瓦刀、磚塊就開干，直到把大樓壘起來，這樣做往往意味着中間會出現錯誤，要推倒重來或是蓋好以后結構有問題但又不知道出現在哪誰的責任甚至會在某一天轟然倒塌，那我們如果用工程化的思想去做，就會先畫圖紙、確定結構、確定用料和預算以及工期，另外需要用到什么工種多少人等等，我們會先打地基再建框架再填充牆體這樣最后建立起來的高樓才是穩固的合規的，什么地方出了問題我們也能找到源頭和負責人。
模塊化（功能模塊比如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方面，組件，一般是指可視化的區域