CSS代碼規範

標籤：

空格

• 選取器 與 { 之間必須包含空格。
• 列表型屬性值 書寫在單行時，, 後必須跟一個空格。
• 屬性名稱 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
  margin: 0;

• 、+、~ 選取器的兩邊各保留一個空格。

選取器

• 當一個 rule 包含多個 selector 時，每個選取器聲明必須獨佔一行。

 

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

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

• 如無必要，不得為 id、class 選取器添加類型選取器進行限定。
• 選取器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘可能精確。

屬性書寫順序

同一 rule set 下的屬性在書寫時，應按功能進行分組，並以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相關） > Visual（視覺效果） 的順序書寫，以提高代碼的可讀性。

Formatting Model 相關屬性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相關屬性包括：border / margin / padding / width / height 等
Typographic 相關屬性包括：font / line-height / text-align / word-wrap 等
Visual 相關屬性包括：background / color / transition / list-style 等

清楚浮動

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

值與單位

• url() 函數中的路徑不加引號。
• font-family

  [強制] font-family 按「西文字型在前、中文字型在後」、「效果佳 (品質高/更能滿足需求) 的字型在前、效果一般的字型在後」的順序編寫，最後必須指定一個通用字型族( serif / sans-serif )。

 

  
h1 {
  
 font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
  
}
 

• font-weight 屬性必須使用數值方式描述。

相容性

• 盡量使用簡單的 屬性 hack。

 

  
.box {
  
 _display: inline; /* fix double margin */
  
 float: left;
  
 margin-left: 20px;
  
}
  

  
.container {
  
 overflow: hidden;
  
 *zoom: 1; /* triggering hasLayout */
  
}
 

來自為知筆記(Wiz)

CSS代碼規範