css的模塊化方案可能和js的一樣多，下面簡(jiǎn)單介紹幾種主要的模塊方案。
oocss
面對(duì)對(duì)象的規(guī)則，主要的原則是兩種：分離結(jié)構(gòu)和外觀，分離容器和內(nèi)容。
名詞解釋
分離結(jié)構(gòu)和外觀：增加可重復(fù)的設(shè)計(jì)單元，同時(shí)去推進(jìn)產(chǎn)品和ui對(duì)這方面的思考，比如下面的css使用時(shí)對(duì)象模式的命名和模塊化規(guī)則。 分離容器和內(nèi)容：指的是樣式的使用不以元素位置唯一匹配，在任何位置你都可以使用這個(gè)樣式，如果你不適用這個(gè)樣式，會(huì)保持默認(rèn)的樣式。實(shí)例
| // dom結(jié)構(gòu)<div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">標(biāo)題</div> </div> <div class="toogle-details "></div></div> |
| // 模塊的標(biāo)記 唯一標(biāo)識(shí).toggle{}// 皮膚樣式的寫(xiě)法，如果基本結(jié)構(gòu)是一樣的，你可以用complex的一個(gè)輔助樣式.toggle.simple{}// 是否做嵌套寫(xiě)法 相信很多預(yù)處理器的部分會(huì)支持嵌套 然后很多人會(huì)這樣寫(xiě),不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實(shí)你會(huì)這樣組織么 不是很建議 這樣會(huì)降低查詢(xún)效率 如果能確認(rèn)唯一性的時(shí)候 其實(shí)直接寫(xiě)子即可.toogle{}.toogle-control{}.toogle-details{} |
smacss
sma和oocss有很多類(lèi)似之處，但區(qū)分的地方有很多，主要是對(duì)樣式的分類(lèi)。分別是：基礎(chǔ)、布局、模塊、狀態(tài)、主題
基礎(chǔ)
可以適用于任何位置，我也稱(chēng)全局樣式
布局
主要是用來(lái)實(shí)現(xiàn)不同的特色布局，提高布局的復(fù)用率，
模塊
設(shè)計(jì)中的模塊化，可重復(fù)使用的一個(gè)單元，一般是dom+css的耦合綁定。
狀態(tài)
描述在特定狀態(tài)下的布局或者模塊的特殊化表現(xiàn)，這里我覺(jué)得要推薦下《css禪意花園》，在dom結(jié)構(gòu)不變的情況下，可以通過(guò)css的皮膚化實(shí)現(xiàn)樣式的改版。
主題
與狀態(tài)相比更加定制的是，我們會(huì)針對(duì)有些特殊的模塊，進(jìn)行主題的設(shè)置，包括一系列的顏色、尺寸、交互等進(jìn)行重度設(shè)計(jì)，參數(shù)化設(shè)計(jì)。
案例
| // dom結(jié)構(gòu)<div class="toogle toogle-simple"> <div class="toogle-control is-active"> <div class="toogle-tittle">標(biāo)題</div> </div> <div class="toogle-details "></div></div> |
與oocss相比，其實(shí)大部分設(shè)計(jì)思路是一樣的，以一個(gè)類(lèi)作為css的作用域（作用域就是兩個(gè)限制，1 不符合場(chǎng)景時(shí)限制禁止使用 2 符合場(chǎng)景時(shí)要正確的使用），另外的區(qū)別就是針對(duì)皮膚和狀態(tài)的不同書(shū)寫(xiě)規(guī)則。
bem
bem就是塊、元素、修飾符的思維去寫(xiě)樣式。它不涉及具體的css結(jié)構(gòu)，只是建議你如何命名css.
新聞熱點(diǎn)
疑難解答
圖片精選
