CSS編碼規範

是曾小白吖發表於2020-02-14
CSS

1.前言

本文件的目標是使研發中心的各位同學css能夠按照統一規範進行編寫，使其風格保持一致，便於理解和維護。在使用sass,less,stylus也遵循本文件。

2.程式碼風格

2.1 縮排，空格

  1. [強制] 使用 2 個空格做為一個縮排層級，不允許使用 4 個空格 或 tab 字元。
  2. [強制] 選擇器 與 { 之間必須包含空格。
  3. [強制] 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
  4. [強制] 列表型屬性值 書寫在單行時，, 後必須跟一個空格

示例：

.selector {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
複製程式碼

2.2 行長度

[強制] 每行不得超過 120 個字元，除非單行不可分割。

示例：

/* 不同屬性值按邏輯分組 */
background:
  transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
  no-repeat 0 0;

/* 可重複多次的屬性，每次重複一行 */
background-image:
  url(aVeryVeryVeryLongUrlIsPlacedHere)
  url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 類似函式的屬性值可以根據函式呼叫的縮排進行 */
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))
);
複製程式碼

2.3 選擇器

[強制] 當一個 rule 包含多個 selector 時，每個選擇器宣告必須獨佔一行。

示例：

/* good */
.post,
.page,
.comment {
  line-height: 1.5;
}

/* bad */
.post, .page, .comment {
  line-height: 1.5;
}
複製程式碼

2.4 有符號的空格

[強制] >、+、~ 選擇器的兩邊各保留一個空格。

示例：

/* good */
main > nav {
  padding: 10px;
}

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

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

/* bad */
main>nav {
  padding: 10px;
}

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

input:checked~button {
  background-color: #69C;
}
複製程式碼

2.5 屬性選擇器

[強制] 屬性選擇器中的值必須用雙引號包圍。

示例：

/* good */
article[character="juliet"] {
  voice-family: "Vivien Leigh", victoria, female;
}

/* bad */
article[character='juliet'] {
  voice-family: "Vivien Leigh", victoria, female;
}
複製程式碼

2.6 屬性

  1. [強制] 屬性定義必須另起一行。
  2. [強制] 屬性定義後必須以分號結尾。

示例：

/* good */
.selector {
  margin: 0;
  padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

/* good */
.selector {
  margin: 0;
}

/* bad */
.selector {
  margin: 0
}
複製程式碼

3.通用

3.1 選擇器

  1. [強制] 如無必要，不得為 id、class 選擇器新增型別選擇器進行限定。（在效能和維護性上，都有一定的影響。）
  2. [建議] 選擇器的巢狀層級應不大於 3 級，位置靠後的限定條件應儘可能精確。

示例：

/* good */
#error,
.danger-message {
  font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
  font-color: #c00;
}

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}
複製程式碼

3.2 屬性縮寫

[建議] 在可以使用縮寫的情況下，儘量使用屬性縮寫。

3.3 清除浮動

[建議] 當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設定 clear 或觸發 BFC 的方式進行 clearfix。儘量不使用增加空標籤的方式。

觸發 BFC 的方式很多，常見的有：

  1. float 非 none
  2. position 非 static
  3. overflow 非 visible

另需注意，對已經觸發 BFC 的元素不需要再進行 clearfix。

3.4 !important

[建議] 儘量不使用 !important 宣告。 當需要強制指定樣式且不允許任何場景覆蓋時，通過標籤內聯和 !important 定義樣式。

3.5 z-index

  1. [建議] 將 z-index 進行分層，對文件流外絕對定位元素的視覺層級關係進行管理。同層的多個元素，如多個由使用者輸入觸發的 Dialog，在該層級內使用相同的 z-index 或遞增 z-index。
  2. [建議] 在可控環境下，期望顯示在最上層的元素，z-index 指定為 999999。

4.值與單位

4.1 文字

[強制] 文字內容必須用雙引號包圍。

示例：

/* good */
html[lang|="zh"] q:before {
  font-family: "Microsoft YaHei", sans-serif;
  content: "“";
}

html[lang|="zh"] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}

/* bad */
html[lang|=zh] q:before {
  font-family: 'Microsoft YaHei', sans-serif;
  content: '“';
}


html[lang|=zh] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}
複製程式碼

4.2 數值

[強制] 當數值為 0 - 1 之間的小數時，省略整數部分的 0。。

示例：

/* good */
panel {
  opacity: .8;
}

/* bad */
panel {
  opacity: 0.8;
}
複製程式碼

4.3 url()

[強制] url() 函式中的路徑不加引號。

示例：

body {
  background: url(bg.png);
}
複製程式碼

4.4 長度

[強制] 長度為 0 時須省略單位。 (也只有長度單位可省)。

示例：

/* good */
body {
  padding: 0 5px;
}

/* bad */
body {
  padding: 0px 5px;
}
複製程式碼

4.4 顏色

  1. [強制] RGB顏色值必須使用十六進位制記號形式 #rrggbb。不允許使用 rgb()。 （注：帶有alpha的顏色資訊可以使用 rgba()。使用 rgba() 時每個逗號後必須保留一個空格。）
  2. [強制] 顏色值不允許使用命名色值。
  3. 建議] 顏色值中的英文字元采用小寫。

示例：

/* good */
.success {
  box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  border-color: #008000;
}

/* bad */
.success {
  box-shadow: 0 0 2px rgba(0,128,0,.3);
  border-color: rgb(0, 128, 0);
}

/* bad */
.success {
  color: lightgreen;
}

/* bad */
.success {
  background-color: #ACA;
  color: #90ee90;
}
複製程式碼

5 文字編排

5.1 字號

[強制] 需要在 Windows 平臺顯示的中文內容，其字號應不小於 12px。（注：由於 Windows 的字型渲染機制，小於 12px 的文字顯示效果極差、難以辨認。）

5.2 字重

[強制] font-weight 屬性必須使用數值方式描述。（注： CSS 的字重分 100 – 900 共九檔，但目前受字型本身質量和瀏覽器的限制，實際上支援 400 和 700 兩檔，分別等價於關鍵詞 normal 和 bold。 瀏覽器本身使用一系列啟發式規則來進行匹配，在 <700 時一般匹配字型的 Regular 字重，>=700 時匹配 Bold 字重。但已有瀏覽器開始支援 =600 時匹配 Semibold 字重 (見此表)，故使用數值描述增加了靈活性，也更簡短。）

示例：

/* good */
h1 {
  font-weight: 700;
}

/* bad */
h1 {
  font-weight: bold;
}
複製程式碼

5.2 行高

[建議] line-height 在定義文字段落時，應使用數值。（注： 將 line-height 設定為數值，瀏覽器會基於當前元素設定的 font-size 進行再次計算。在不同字號的文字段落組合中，能達到較為舒適的行間間隔效果，避免在每個設定了 font-size 都需要設定 line-height。 當 line-height 用於控制垂直居中時，還是應該設定成與容器高度一致。）

示例：

/* good */
h1 {
  font-weight: 700;
}

/* bad */
h1 {
  font-weight: bold;
}
複製程式碼

相關文章