css模塊化方案

css模塊化方案

css的模塊化方案可能和js的同樣多，下面簡單介紹幾種主要的模塊方案。

oocss

面對對象的規則，主要的原則是兩種：分離結構和外觀，分離容器和內容。

名詞解釋

分離結構和外觀：增長可重複的設計單元，同時去推動產品和ui對這方面的思考，好比下面的css使用時對象模式的命名和模塊化規則。

分離容器和內容：指的是樣式的使用不以元素位置惟一匹配，在任何位置你均可以使用這個樣式，若是你不適用這個樣式，會保持默認的樣式。

實例

// dom結構
<div class="toogle simple">
  <div class="toogle-control open">
    <div class="toogle-tittle">標題</div>
  </div>
  <div class="toogle-details "></div>
</div>
複製代碼

// 模塊的標記 惟一標識
.toggle{
}
// 皮膚樣式的寫法，若是基本結構是同樣的，你能夠用complex的一個輔助樣式
.toggle.simple{
}
// 是否作嵌套寫法 相信不少預處理器的部分會支持嵌套 而後不少人會這樣寫,不被推薦的
.toogle{
 .toogle-control{
 }
 .toogle-details{
 }
}
// 其實你會這樣組織麼 不是很建議 這樣會下降查詢效率 若是能確認惟一性的時候 其實直接寫子便可
.toogle{}
.toogle-control{}
.toogle-details{}
複製代碼

smacss

sma和oocss有不少相似之處，但區分的地方有不少，主要是對樣式的分類。分別是：基礎、佈局、模塊、狀態、主題

基礎

能夠適用於任何位置，我也稱全局樣式

佈局

主要是用來實現不一樣的特點佈局，提升佈局的複用率，

模塊

設計中的模塊化，可重複使用的一個單元，通常是dom+css的耦合綁定。

狀態

描述在特定狀態下的佈局或者模塊的特殊化表現，這裏我以爲要推薦下《css禪意花園》，在dom結構不變的狀況下，能夠經過css的皮膚化實現樣式的改版。

主題

與狀態相比更加定製的是，咱們會針對有些特殊的模塊，進行主題的設置，包括一系列的顏色、尺寸、交互等進行重度設計，參數化設計。

案例

// dom結構
<div class="toogle toogle-simple">
  <div class="toogle-control is-active">
    <div class="toogle-tittle">標題</div>
  </div>
  <div class="toogle-details "></div>
</div>
複製代碼

與oocss相比，其實大部分設計思路是同樣的，以一個類做爲css的做用域（做用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區別就是針對皮膚和狀態的不一樣書寫規則。

bem

bem就是塊、元素、修飾符的思惟去寫樣式。它不涉及具體的css結構，只是建議你如何命名css.

案例

// dom結構
<div class="toogle toogle--simple">
  <div class="toogle_control toogle_control--active">
    <div class="toogle_tittle">標題</div>
  </div>
  <div class="toogle_details "></div>
</div>
複製代碼

解釋

• 塊級：所屬組件的名稱
• 元素：元素在組件裏的名稱
• 修飾符：任何與元素修飾相關的類

這種命名方式的缺點，樣式名會很長，但實際上在smacss以及oocss中都會必定程度的使用，命名很語義化，在不清楚模塊時，咱們能夠根據樣式名得出對應的結構多是如何的。

選擇合適的方案

不管哪一種方案，關鍵是哪一種是最合適團隊的，咱們目前的方式是：bem和smacss集合的方式。