武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼，這樣會(huì)影響代碼的閱讀體驗(yàn)，這里我總結(jié)一個(gè)CSS書寫規(guī)范、CSS書寫順序供大家參考，這些是參考了國(guó)外一些文章以及我的個(gè)人經(jīng)驗(yàn)總結(jié)出來，我想對(duì)寫CSS的前端用戶來說是值得學(xué)習(xí)的。

寫了這么久的CSS，但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼，這樣會(huì)影響代碼的閱讀體驗(yàn)，這里我總結(jié)一個(gè)CSS書寫順序供大家參考，這些是參考了國(guó)外一些文章以及我的個(gè)人經(jīng)驗(yàn)總結(jié)出來，我想對(duì)寫CSS的前端用戶來說是值得學(xué)習(xí)的。

CSS書寫順序

位置屬性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

CSS書寫規(guī)范

使用CSS縮寫屬性

CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。

去掉小數(shù)點(diǎn)前的”0″

簡(jiǎn)寫命名

很多用戶都喜歡簡(jiǎn)寫類名，但前提是要讓人看懂你的命名才能簡(jiǎn)寫哦！

16進(jìn)制顏色代碼縮寫

有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗(yàn)為主。

連字符CSS選擇器命名規(guī)范

1.長(zhǎng)名稱或詞組可以使用中橫線來為選擇器命名。

2.不建議使用”_”下劃線來命名CSS選擇器，為什么呢？

　　輸入的時(shí)候少按一個(gè)shift鍵；
　　瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）
　　能良好區(qū)分JavaScript變量命名（JS變量命名是用”_”）

這里有一篇破折號(hào)與下劃線的詳細(xì)討論，英文：點(diǎn)擊查看 中文篇：點(diǎn)擊查看

不要隨意使用id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級(jí)優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

為選擇器添加狀態(tài)前綴

有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了”.is-”前綴。