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.

案例

// dom結(jié)構(gòu)
<div class="toogle toogle--simple">
  <div class="toogle_control toogle_control--active">
    <div class="toogle_tittle">標(biāo)題</div>
  </div>
  <div class="toogle_details "></div>
</div>

解釋

• 塊級(jí)：所屬組件的名稱(chēng)
• 元素：元素在組件里的名稱(chēng)
• 修飾符：任何與元素修飾相關(guān)的類(lèi)

這種命名方式的缺點(diǎn)，樣式名會(huì)很長(zhǎng)，但實(shí)際上在smacss以及oocss中都會(huì)一定程度的使用，命名很語(yǔ)義化，在不清楚模塊時(shí)，我們可以根據(jù)樣式名得出對(duì)應(yīng)的結(jié)構(gòu)可能是如何的。

選擇合適的方案

無(wú)論哪種方案，關(guān)鍵是哪種是最合適團(tuán)隊(duì)的，我們目前的方式是：bem和smacss集合的方式。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論