掌握模塊化開發(fā)的思想是我們進(jìn)行模塊化開發(fā)的基礎(chǔ)。他有以下幾部分組成：

1.css模塊化
2.html模塊化
3.js模塊化

模塊化開發(fā)的優(yōu)勢

1.更好的組織和維護(hù)代碼
2.按需加載
3.避免命名沖突

css模塊化

css模塊化編程語言

說到css的編程語言我們就需要了解一下css預(yù)處理器，它用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。

css模塊化編程語言的的種類

1.sass
2.less
3.stylus
4.Turbine
5.Swithch CSS
6.CSS Cacheer
7.DT CSS
……

現(xiàn)階段流行的編程語言

1.sass(建議使用)
    sass的最新版本scss，這個語言有和css相似的結(jié)構(gòu)，直接用*.css文件改文件名為*.scss，就可以進(jìn)行編譯使用
2.less

sass編程語言組成

1.變量
2.嵌套
3.混合
4.繼承
5.函數(shù)
6.運(yùn)算
7.條件判斷與循環(huán)
8.注釋

使用的工具

1.命令行
ruby
安裝使用教程：http://www.imooc.com/code/6389
2.可視化工具
koala
下載地址：http://koala-app.com/index-zh.html
使方用法：http://www.w3cplus.com/blog/777.html

css開發(fā)中的規(guī)范（BEM）

1.B（block）:模塊化
2.E（element）:元素標(biāo)簽
3.M（modify）:屬性修飾
結(jié)構(gòu)：
.block{}
.block__element{}
.block--modifier{}

詳細(xì)介紹見 參考資料 BEM

參考資料和視頻教程

css預(yù)處理器相關(guān)文檔

http://www.w3cplus.com/bookmarks/css-preprocessor.html

sass

http://www.sass-zh.com/docs.html （官方文檔跳轉(zhuǎn)）
http://www.w3cplus.com/sassguide/syntax.html（文檔）
http://www.imooc.com/learn/311（視頻）
http://www.imooc.com/learn/436（視頻）
http://www.imooc.com/learn/371（視頻）

less

http://lesscss.cn/ （官方文檔跳轉(zhuǎn)）
http://www.imooc.com/learn/61（視頻）
http://www.imooc.com/learn/102（視頻）

BEM

http://www.w3cplus.com/preprocessor/getting-sass-y-with-bem.html
http://www.w3cplus.com/css/battling-bem-extended-edition-common-problems-and-how-to-avoid-them.html