如何規(guī)范CSS命名？更好的協(xié)同開發(fā)！

很多小伙伴可能都以為前端開發(fā)工程師需要自己寫所有的頁面文件。但實際上前端開發(fā)工程師在進入崗位后需要干的第一件事情就是查看前人寫的頁面文件（特別是css和js）。原因很簡單，css和js這些都是可以復(fù)用的（尤其是css），而且對于一個網(wǎng)站而言，統(tǒng)一的風(fēng)格很重要，所以會出現(xiàn)多個頁面共用一個css的現(xiàn)象。介紹這些內(nèi)容主要是為了引出接下來要討論的內(nèi)容？如何協(xié)同開發(fā)頁面？實際上應(yīng)該換種說法：如何統(tǒng)一開發(fā)思想？要統(tǒng)一開發(fā)思想需要先干的一件事，就是統(tǒng)一代碼規(guī)范，接下來小編會分成三篇文章介紹前端編碼規(guī)范，本篇文章要介紹的是：css規(guī)范。

命名規(guī)范

我們說過，我們最終的目的是協(xié)同開發(fā)，所以就要讓我們的代碼讓別人看得懂。所以在css命名上需要有一定的規(guī)范，不同公司都有不同的規(guī)范，但這些規(guī)范大多都有相同的特點：

1. 類名不使用魔法類名，也就是說，你的類名不能隨便起，應(yīng)當(dāng)具有一定意義（比如a，b這種類名就是不負(fù)責(zé)任的一種起名方式）。
2. 如果可以，請不要使用拼音作為命名，因為閱讀代碼的人不一定會懂拼音，這不利于維護
3. 如果可以，類名盡量簡寫（前提是能讓人看得懂，也就是說在2的基礎(chǔ)上簡寫。
4. 類名的命名時如果涉及多個單詞組成的長名稱或者詞組，需要進行連字符進行連接，請使用中劃線（-），因為下劃線是js中經(jīng)常使用到的，使用中劃線避免沖突。
5. 不要隨便使用id選擇器（不然會出現(xiàn)命名荒），id選擇器在頁面中是唯一的，不可復(fù)用，而且id的優(yōu)先級比較高，所以在調(diào)試上會比較麻煩。所以盡量按需使用。
6. 為選擇器添加狀態(tài)前綴（或者直接以一個狀態(tài)命名一個選擇器）這樣可以更有語義化，比如某個標(biāo)簽被選中激活了，可以使用active作為一個激活情況的css來應(yīng)用。
7. css對大小寫不敏感（不是絕對的，如果與HTML文檔一起工作，class和id就對大小寫敏感，所以，請統(tǒng)一使用小寫），但并不意味著你可以隨便采用大小寫混合，最好的方式是統(tǒng)一用大寫或者小寫，就個人經(jīng)驗而言，小寫字母更易閱讀。

書寫順序

• 另外，在一些簡寫中也要求屬性按一定順序排列，比如當(dāng)簡寫background屬性時，屬性值的順序為:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

其他代碼優(yōu)化

• 在可以使用簡寫的情況下請盡量使用簡寫，這樣能精簡代碼便于閱讀。
• 如果有小數(shù)點前是0的話，可以去掉小數(shù)點。（但是小編還是以為留著小數(shù)點會更有閱讀性）。
• 如果使用16進制顏色代碼，可以縮寫的話盡量縮寫。（但是大多數(shù)情況不一定能縮寫，所以不縮寫也不會有太大的閱讀問題）。
• 注釋很重要，要明白你寫的代碼最后不只是你要看的，好的注釋可以讓你的同事更好理解你的代碼，也能避免同事間的沖突（試想一下，你看到的寫的想屎一樣的代碼來自你的一個不是很待見的同事，你會給他好臉色嗎？）。
• 不要使用?！important?，它是樣式優(yōu)先級最高的意思，如果使用他會讓本來就不好調(diào)試的css代碼更加混亂，這個命令通常是在調(diào)試的時候使用的，盡量不要寫進生產(chǎn)代碼。

如果對你的代碼是否符合規(guī)范還有疑惑，一些開發(fā)工具提供代碼檢查功能（沒錯我說的就是jetbrain公司的產(chǎn)品，他們家的webstorm，PHPstorm，還有可以兼職編寫前端頁面的idea，pycharm等都有代碼檢查功能，可以檢查css是否符合規(guī)范）。

小結(jié)

符合CSS規(guī)范雖然并不能讓你的代碼渲染得更快，但是它可以讓你和你的同事進行協(xié)同辦公，這樣可以提高個人和整個團隊的工作效率，也能減少團隊之間的摩擦。當(dāng)下的軟件開發(fā)不像以前可以單打獨斗，更多的情況下都是一個團隊在為之奮斗。所以學(xué)號css規(guī)范相當(dāng)重要！更多代碼規(guī)范可以繼續(xù)閱讀W3Cschool之后或之前的文章。