前端初學者最容易忽略的CSS書寫規範和順序

我相信已經有很多人寫了這麼久的CSS，但大部分前端工作者都沒有按照良好的CSS書寫規範來寫CSS代碼，這樣就會影響代碼的閱讀體驗。這裡由我總結一個CSS書寫規範、CSS書寫順序供大家參考。尤其對於初學者來說，更應該學習一下，因為以後的路還很長！

CSS書寫順序

1.位置屬性(position，top，right， display， float，z-index, 等)

2.大小(width， height， padding， margin)

3.文字系列(font， line-height， letter-spacing， color- text-align等)

4.背景(background， border等)

5.其他(animation， transition等)

CSS書寫規範

1.要去掉小數點前面的「0」

2.使用CSS縮寫屬性

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

3.不要隨意使用id選擇器

id在Javascript是唯一的，不能多次使用，而使用class類選擇器卻可以重複使用，另外id的優先順序優先於class，所以id應該按需要使用，而不能隨意的濫用。

4.簡寫命名

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

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六

5.連字元CSS選擇器命名規範

長名稱或片語可以使用中橫線來為選擇器命名。

不建議使用「_」下劃線來命名CSS選擇器，為什麼呢？

（1）輸入的時候少按一個shift鍵；

（2）瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）

（3）能良好區分JavaScript變數命名。

最後，希望大家能在以後的學習和工作當中謹記這幾條，這樣才會成為一個合格的前端工程師！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！