淺談我所見的CSS命名風格

在兩年工作中，總結一下我所見的css命名風格。

?

1.單一class命名

.header {width: 500px;
}
.item {text-indent: 20%;
}

優點：簡單，渲染效率高。

缺點：零散，沒有模塊化。

?

2. 后代選擇器class命名

.header .item a {font-size:14px;
}
.header .item a span {color:#000;
}

優點：模塊化，只對當前模塊有效。

缺點：渲染效率低，增加冗余字符。

?

3.前綴疊加class命名

.header {width: 100%;height: 80px;
}.header-item {font-size: 14px;
}.header-item-a {color: #0066ff;
}

優點：可讀性好，渲染效率高。

缺點：增加冗余字符。

?

4.OOCSS（面向對象）命名

.tr { 
  text-align: right;
}
.pb8 {
  padding-bottom: 8px;
}

優點：語義化，可讀性好，渲染性能高。

缺點：不利于頻繁重構代碼。比如修改上面的padding-bottom的距離，假如改成7px話，是不是類名pb8也要改成pb7。

?

5.BEM（塊、元素、修飾符）命名

.header {width: 300px;height: 400px;
}.header__item { font-size: 16px;
} .header--blue { background: #0066ff;
}

優點：語義化，可讀性好，渲染性能高。

缺點：暫時沒有發現。

?

6.BEM（塊、元素、修飾符）駝峰式class命名

.header {width: 100%;height: 80px;
}
.header-item {font-size：16pc;
}
.header-isShow {display: block;
}

優點：類似于BEM風格，無需區分下劃線還是是中橫線，可讀性好，渲染性能高。

缺點：暫時沒有發現。

?

PS:具體問題具體分析，合理的命名css有利于提高開發效率，便于版本迭代。