CSS 程式碼格式規範

良好的程式碼組織方式，可以提高可讀性，對於團隊開發和後期維護的意義不言而喻。

再強調一下，後面所謂規範只是最佳實踐，並不具有強制性，目的是提高團隊開發效率和後期維護的便利性。

也就是說，即便不遵守後面的規範，程式碼依然有效，本文分享幾種常見的能夠提高可讀性的規範供大家參考借鑑。

當然，還有其他方式提高可讀性，比如科學的CSS屬性排列與引號使用，考慮到篇幅，參閱其他相關文章。

（1）.程式碼縮排：

恰當的縮排可以使程式碼更加清晰，便於團隊和做或者後期維護。

當然，在實際部署的時候，可能會進行壓縮，這不是本文要關注的。

縮排兩個空格，不能使用tab或者tab與空格混搭進行縮排，程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
.selector {
  padding:15px;
  margin:0px 0px 15px;
}

（2）.選擇器分組換行：

關於分組選擇器的基本用法可以參閱CSS E,F 選擇器一章節。

可以將構成分組的子選擇器單獨佔據一行，這樣會更加清晰，程式碼示例如下：

[CSS] 純文字檢視 複製程式碼
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
}

上面的程式碼是不是更加清晰，再強調一下，我們們這是便於開發與團隊合作優先。

至於上述方式可能會增加的額外負擔，可以通過壓縮等方式來消除。

（3）.空格與換行：

為了可讀性或者說為了好看，建議在選擇器與大括號之間新增一個空格。

可以看到，選擇器後面加了一個空格，看起來更加舒適一些。

同時，大括號的後半部分（}）需要單獨佔據一行。

CSS主體部分的每一宣告也需要一定的格式：

（1）.宣告的冒號（:）與屬性值之間新增一個空格。

（2）.每一條宣告需要單獨佔據一行。

（3）.最後一條宣告語句後面的分號是可以省略的，但是建議保留。

（4）.如果大括號中只有一條宣告語句，那麼大括號可以在同一行，程式碼如下：

[CSS] 純文字檢視 複製程式碼
.selector { padding: 15px; }

有些屬性的屬性值可以是多個，那麼屬性值之間需要額外空格，以提高可讀性。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div{
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

對於box-shadow類似屬性值，值之間用逗號分隔，並且額外新增一個空格，如果屬性值較多，可以進行換行縮排操作，以提高可讀性，以background-image屬性為例子，程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
div{
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
  );
}

但是 rgb()、rgba()、hsl()、hsla() 或 rect() 的引數不需要新增空格。

>、+、~等選擇器兩端也要新增空格，否則視覺上看起來過於擁擠，程式碼演示如下：

[CSS] 純文字檢視 複製程式碼
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

（4）.CSS規則之間增加一行：

為了增加可讀性，CSS規則之間使用一個空行分隔。

程式碼片段如下：

[CSS] 純文字檢視 複製程式碼
.selector-secondary {
  display: block;
  width: 200px;
}
   
.selector-three {
  display: span;
  font-size: 12px;
}

上面的程式碼可讀性會明顯提高，尤其是在程式碼量大的時候，否則看起來非常擁擠。

（5）.簡寫屬性：

CSS中有很多複合屬性，如有可能，最好使用屬性的簡寫形式。

好處主要有兩點，首先節省了程式碼量，第二個有利於後期維護與閱讀。

程式碼演示如下：

[CSS] 純文字檢視 複製程式碼
margin:5px 15px 35px 45px;

上面僅以外邊距為例子作為演示。