武林網(www.49028c.com)文章簡介：大部分前端er都沒有按照良好的CSS書寫規范來寫CSS代碼，這樣會影響代碼的閱讀體驗，這里我總結一個CSS書寫規范、CSS書寫順序供大家參考，這些是參考了國外一些文章以及我的個人經驗總結出來，我想對寫CSS的前端用戶來說是值得學習的。

寫了這么久的CSS，但大部分前端er都沒有按照良好的CSS書寫規范來寫CSS代碼，這樣會影響代碼的閱讀體驗，這里我總結一個CSS書寫順序供大家參考，這些是參考了國外一些文章以及我的個人經驗總結出來，我想對寫CSS的前端用戶來說是值得學習的。

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書寫規范

使用CSS縮寫屬性

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

去掉小數點前的”0″

簡寫命名

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

16進制顏色代碼縮寫

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

連字符CSS選擇器命名規范

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

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

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

這里有一篇破折號與下劃線的詳細討論，英文：點擊查看 中文篇：點擊查看

不要隨意使用id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先級優先與class，所以id應該按需使用，而不能濫用。

為選擇器添加狀態前綴

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