工程化、模塊化、和組件化分別是什麼？
工程化
最基礎的工程化思想就是將頁面的結構、樣式和動做分離，工程化是一種思想而不是某種技術，用作工程的思惟看待和開發本身的項目，而不是直接擼起袖子一個頁面一個頁面開些；要蓋一棟大樓，假如咱們不進行工程化的考量那就是一上來掂起瓦刀、磚塊就開幹，直到把大樓壘起來，這樣作每每意味着中間會出現錯誤，要推倒重來或是蓋好之後結構有問題但又不知道出如今哪誰的責任甚至會在某一天轟然倒塌，那咱們若是用工程化的思想去作，就會先畫圖紙、肯定結構、肯定用料和預算以及工期，另外須要用到什麼工種多少人等等，咱們會先打地基再建框架再填充牆體這樣最後創建起來的高樓纔是穩固的合規的，什麼地方出了問題咱們也能找到源頭和負責人。
模塊化（功能模塊好比btn）
工程化是一個更高層次的思想，那麼組件化和模塊化就是工程思想下相對具體的開發方式；模塊化就是假設須要在A頁面寫一個樣式或者功能，這個功能還須要在項目的其餘位置使用，這時候把這個功能分離出來編寫，實現複用還能夠分而治之，
組件化（頁面的一部分 如header/footer）
頁面上每一個獨立的、可視/可交互區域視爲一個組件；
每一個組件對應一個工程目錄，組件所需的各類資源都在這個目錄下就近維護；
組件具備獨立性，所以組件與組件以前能夠自由組合；
頁面只不過是組件的容器，負責組合組件行程功能完成的界面；
當不須要某個組件，能夠替換或者刪除；
組件化將頁面視爲一個容器，頁面上各個獨立部分例如：頭部、導航、焦點圖、側邊欄這些都視爲組件，不一樣的頁面根據內容的須要，去盛放相關組件就能夠組成完成的頁面。
模塊化和組件化的好處就是複用。除了複用還有個好處就是分治，咱們能夠在不影響其餘代碼的狀況下按需求修改某一獨立的模塊或是組件；
三、常見問題：php
若是CSS代碼量比較龐大的，會出現這麼幾個問題：
一、沒法快速確切的知道一個類的做用；
二、沒法快速肯定一個類在哪裏被使用；
三、新增一個類是否會形成衝突；
爲了解決以上問題，能夠將頁面的每個功能模塊（）做爲一個獨立的組件，而後對組件的內容進行合理的命名（好比BUTTON），從而有助於肯定一個CSS代碼和相關頁面結構的功能，
SASS文件組織
CSS預處理器的特色之一是能夠把你的代碼分割成不少個文件，並且不會影響性能。這都要歸功於Sass的@import命令，只要在你的開發環境下，你調用無論多少文件，最終將編譯出一個CSS樣式文件。 多個文件中開發，最終合併輸出一個文件
爲何要建立文件夾？
在家裏，你也不會把全部的紙張放在一個盒子裏。你可能會使用一個文件夾。一個用於房子上，一個用於銀行，一個用於帳單等等。 你在建立CSS的架構的時候也應該如此：你不僅是把全部的Sass文件放在一個文件夾下，你會將他們分類。
4.解決方案
項目中都會包括幾個經常使用的文件目錄：
css：主要放置.css文件
js：主要放置.js文件
images：主要放置圖片文件
html：主要放置.html或.php之類文件（我通常喜歡直接放在項目根錄下
五、編碼實戰css
六、擴展思考html
七、參考文獻gulp
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.htmlsass
問題：架構
一、組件化後，一個文件夾一個組件，最後怎麼把組件拼接起來？框架
使用gulp之類打包工具。模塊化
二、scss文件分類，文件夾究竟怎麼設立最好呢？工具
根據實際的開發須要來決定，可是大致的結構要有的，而且不能隨意更改；組件化
三、模塊和組件算不算同樣的作法
模塊能夠是組件（button按鈕之類的），也能夠被組件包裹；模塊主要指js方面，組件，通常是指可視化的區域