在兩年工作中，總結(jié)一下我所見的css命名風(fēng)格。

?

1.單一class命名

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

優(yōu)點：簡單，渲染效率高。

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

?

2. 后代選擇器class命名

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

優(yōu)點：模塊化，只對當(dāng)前模塊有效。

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

?

3.前綴疊加class命名

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

優(yōu)點：可讀性好，渲染效率高。

缺點：增加冗余字符。

?

4.OOCSS（面向?qū)ο?#xff09;命名

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

優(yōu)點：語義化，可讀性好，渲染性能高。

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

?

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

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

優(yōu)點：語義化，可讀性好，渲染性能高。

缺點：暫時沒有發(fā)現(xiàn)。

?

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

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

優(yōu)點：類似于BEM風(fēng)格，無需區(qū)分下劃線還是是中橫線，可讀性好，渲染性能高。

缺點：暫時沒有發(fā)現(xiàn)。

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/Sroot/p/7534980.html

總結(jié)

以上是生活随笔為你收集整理的浅谈我所见的CSS命名风格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。