很多小伙伴可能都以為前端開發(fā)工程師需要自己寫所有的頁面文件。但實(shí)際上前端開發(fā)工程師在進(jìn)入崗位后需要干的第一件事情就是查看前人寫的頁面文件（特別是css和js）。原因很簡單，css和js這些都是可以復(fù)用的（尤其是css），而且對(duì)于一個(gè)網(wǎng)站而言，統(tǒng)一的風(fēng)格很重要，所以會(huì)出現(xiàn)多個(gè)頁面共用一個(gè)css的現(xiàn)象。介紹這些內(nèi)容主要是為了引出接下來要討論的內(nèi)容？如何協(xié)同開發(fā)頁面？實(shí)際上應(yīng)該換種說法：如何統(tǒng)一開發(fā)思想？要統(tǒng)一開發(fā)思想需要先干的一件事，就是統(tǒng)一代碼規(guī)范，接下來小編會(huì)分成三篇文章介紹前端編碼規(guī)范，本篇文章要介紹的是：css規(guī)范。
命名規(guī)范
我們說過，我們最終的目的是協(xié)同開發(fā)，所以就要讓我們的代碼讓別人看得懂。所以在css命名上需要有一定的規(guī)范，不同公司都有不同的規(guī)范，但這些規(guī)范大多都有相同的特點(diǎn)：
- 類名不使用魔法類名，也就是說，你的類名不能隨便起，應(yīng)當(dāng)具有一定意義（比如a，b這種類名就是不負(fù)責(zé)任的一種起名方式）。
- 如果可以，請(qǐng)不要使用拼音作為命名，因?yàn)殚喿x代碼的人不一定會(huì)懂拼音，這不利于維護(hù)
- 如果可以，類名盡量簡寫（前提是能讓人看得懂，也就是說在2的基礎(chǔ)上簡寫。
- 類名的命名時(shí)如果涉及多個(gè)單詞組成的長名稱或者詞組，需要進(jìn)行連字符進(jìn)行連接，請(qǐng)使用中劃線（-），因?yàn)橄聞澗€是js中經(jīng)常使用到的，使用中劃線避免沖突。
- 不要隨便使用id選擇器（不然會(huì)出現(xiàn)命名荒），id選擇器在頁面中是唯一的，不可復(fù)用，而且id的優(yōu)先級(jí)比較高，所以在調(diào)試上會(huì)比較麻煩。所以盡量按需使用。
- 為選擇器添加狀態(tài)前綴（或者直接以一個(gè)狀態(tài)命名一個(gè)選擇器）這樣可以更有語義化，比如某個(gè)標(biāo)簽被選中激活了，可以使用active作為一個(gè)激活情況的css來應(yīng)用。
- css對(duì)大小寫不敏感（不是絕對(duì)的，如果與HTML文檔一起工作，class和id就對(duì)大小寫敏感，所以，請(qǐng)統(tǒng)一使用小寫），但并不意味著你可以隨便采用大小寫混合，最好的方式是統(tǒng)一用大寫或者小寫，就個(gè)人經(jīng)驗(yàn)而言，小寫字母更易閱讀。
書寫順序
- css是有順序的，后面寫的樣式在優(yōu)先級(jí)相同的情況下會(huì)覆蓋掉前面的樣式，所以請(qǐng)注意你的書寫順序！
- 我們一般寫css的時(shí)候要按照一定的順序有規(guī)律的寫css代碼，這樣會(huì)提高代碼的可閱讀性。一種經(jīng)典的css屬性書寫順序是這樣的：
- 位置屬性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)
- 另外，在一些簡寫中也要求屬性按一定順序排列，比如當(dāng)簡寫background屬性時(shí)，屬性值的順序?yàn)?
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
其他代碼優(yōu)化
- 在可以使用簡寫的情況下請(qǐng)盡量使用簡寫，這樣能精簡代碼便于閱讀。
- 如果有小數(shù)點(diǎn)前是0的話，可以去掉小數(shù)點(diǎn)。（但是小編還是以為留著小數(shù)點(diǎn)會(huì)更有閱讀性）。
- 如果使用16進(jìn)制顏色代碼，可以縮寫的話盡量縮寫。（但是大多數(shù)情況不一定能縮寫，所以不縮寫也不會(huì)有太大的閱讀問題）。
- 注釋很重要，要明白你寫的代碼最后不只是你要看的，好的注釋可以讓你的同事更好理解你的代碼，也能避免同事間的沖突（試想一下，你看到的寫的想屎一樣的代碼來自你的一個(gè)不是很待見的同事，你會(huì)給他好臉色嗎？）。
- 不要使用?
！important?，它是樣式優(yōu)先級(jí)最高的意思，如果使用他會(huì)讓本來就不好調(diào)試的css代碼更加混亂，這個(gè)命令通常是在調(diào)試的時(shí)候使用的，盡量不要寫進(jìn)生產(chǎn)代碼。
如果對(duì)你的代碼是否符合規(guī)范還有疑惑，一些開發(fā)工具提供代碼檢查功能（沒錯(cuò)我說的就是jetbrain公司的產(chǎn)品，他們家的webstorm，PHPstorm，還有可以兼職編寫前端頁面的idea，pycharm等都有代碼檢查功能，可以檢查css是否符合規(guī)范）。
小結(jié)
符合CSS規(guī)范雖然并不能讓你的代碼渲染得更快，但是它可以讓你和你的同事進(jìn)行協(xié)同辦公，這樣可以提高個(gè)人和整個(gè)團(tuán)隊(duì)的工作效率，也能減少團(tuán)隊(duì)之間的摩擦。當(dāng)下的軟件開發(fā)不像以前可以單打獨(dú)斗，更多的情況下都是一個(gè)團(tuán)隊(duì)在為之奮斗。所以學(xué)號(hào)css規(guī)范相當(dāng)重要！更多代碼規(guī)范可以繼續(xù)閱讀W3Cschool之后或之前的文章。
