css中如何實(shí)現(xiàn)模塊化

css中如何實(shí)現(xiàn)模塊化？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(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{
}
// 皮膚樣式的寫法，如果基本結(jié)構(gòu)是一樣的，你可以用complex的一個(gè)輔助樣式
.toggle.simple{
}
// 是否做嵌套寫法 相信很多預(yù)處理器的部分會(huì)支持嵌套 然后很多人會(huì)這樣寫,不被推薦的
.toogle{
 .toogle-control{
 }
 .toogle-details{
 }
}
// 其實(shí)你會(huì)這樣組織么 不是很建議 這樣會(huì)降低查詢效率 如果能確認(rèn)唯一性的時(shí)候 其實(shí)直接寫子即可
.toogle{}
.toogle-control{}
.toogle-details{}

smacss

sma和oocss有很多類似之處，但區(qū)分的地方有很多，主要是對(duì)樣式的分類。分別是：基礎(chǔ)、布局、模塊、狀態(tài)、主題

基礎(chǔ)

可以適用于任何位置，我也稱全局樣式

布局

主要是用來實(shí)現(xiàn)不同的特色布局，提高布局的復(fù)用率，

模塊

設(shè)計(jì)中的模塊化，可重復(fù)使用的一個(gè)單元，一般是dom+css的耦合綁定。

狀態(tài)

描述在特定狀態(tài)下的布局或者模塊的特殊化表現(xiàn)，這里我覺得要推薦下《css禪意花園》，在dom結(jié)構(gòu)不變的情況下，可以通過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è)類作為css的作用域（作用域就是兩個(gè)限制，1 不符合場(chǎng)景時(shí)限制禁止使用 2 符合場(chǎng)景時(shí)要正確的使用），另外的區(qū)別就是針對(duì)皮膚和狀態(tài)的不同書寫規(guī)則。

bem

bem就是塊、元素、修飾符的思維去寫樣式。它不涉及具體的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í)：所屬組件的名稱

• 元素：元素在組件里的名稱

• 修飾符：任何與元素修飾相關(guān)的類

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

關(guān)于css中如何實(shí)現(xiàn)模塊化問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。