教你規範 CSS 的命名和書寫

作為前端的設計人員，對於CSS的接觸，就像吃飯一樣，css對於現在網頁很重要，要不怎麼經常有人說用css來製作網頁呢，理所當然，CSS命名規範也十分重要，規範它的命名有利於代碼的語義和團隊開發。

在這裡整理了Web前端開發中的各種CSS規範，包括文件規範、命名規範、書寫規範等。

一、文件規範

1、文件均歸檔至約定的目錄中如分頁pagination.css 2、文件名必須由小寫字母、數字、中劃線組成， 單個CSS文件避免過大（建議少於300行）

二、命名規範

規則命名中，不允許使用大寫字母，避免使用中文拼音，應該採用更簡明有語義的英文單詞進行組合，注意縮寫，但是不能盲目縮寫，不允許通過1、2、3等序號進行命名，儘可能提高代碼模塊的復用，樣式盡量用組合的方式

2、屬性編寫順序 顯示屬性：display/list-style/position/float/clear …

自身屬性（盒模型）：width/height/margin/padding/border 文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

三、書寫規範

每個聲明結束都應該帶一個分號，不管是不是最後一個聲明; CSS文件中的所有的代碼都應該小寫; 除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設置; 每一條規則應該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設置屬性;

四、代碼性能優化

選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置， 禁止在css中使用*選擇符， 0後面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px， 如果可以，顏色盡量用三位字元表示，例如#AABBCC寫成#ABC ， 在保持代碼解耦的前提下，盡量合併重複的樣式。

五、其他規範

不要輕易改動全站CSS和通用CSS庫。改動後，要經過全面測試。 絕對不要在CSS中使用」*」選擇符，背景圖片請儘可能使用sprite技術, 減小http請求, 考慮到多人協作開發, sprite按照模塊、業務、頁面來劃分均可。

推薦閱讀：