通用約定


通用約定

程式碼組織

  • 以元件為單位組織程式碼片段；
  • 制定一致的註解規格；
  • 元件區塊和子元件區塊以及宣告區塊之間使用一空行分隔，子元件區塊之間三空行分隔；
  • 如果使用了多個CSS 文件，將其按照元件而非頁面的形式分拆，因為頁面會被重組，而元件只會被移動；

良好的註解是非常重要的。請留出時間來描述元件（component）的工作方式、限制和建構它們的方法。不要讓你的團隊其它成員 來猜測一段不通用或不明顯的代碼的目的。

提示：透過設定編輯器，可以提供快速鍵來輸出一致認可的註解模式。 

/* ==========================================================================
   组件块
 ============================================================================ */

/* 子组件块
 ============================================================================ */
.selector {
  padding: 15px;
  margin-bottom: 15px;
}

/* 子组件块
 ============================================================================ */
.selector-secondary {
  display: block; /* 注释*/
}

.selector-three {
  display: span;
}

Class 和ID

  • 使用語意化、通用的命名方式；
  • 使用連字號- 作為ID、Class 名稱界定符，不要駝峰命名法和底線；
  • 避免選擇器嵌套層級過多，盡量少於3 級；
  • 避免選擇器和Class、ID 疊加使用；

出於效能考量，在沒有必要的情況下避免元素選擇器疊加Class、ID 使用。

元素選擇器和 ID、Class 混合使用也違反關注分離原則。如果HTML標籤修改了，就要再去修改 CSS 程式碼，不利於後期維護。 

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}

宣告區塊格式

  • 選擇器分組時，保持獨立的選擇器佔用一行；
  • 宣告區塊的左括號 {前新增一個空格；
  • 宣告區塊的右括號 } 應單獨成行；
  • 宣告語句中的 : 後應新增一個空格；
  • 宣告語句應以分號 ; 結尾；
  • #一般以逗號分隔的屬性值，每個逗號後應加上一個空格；
  • #rgb()、rgba()、hsl()、hsla() 或 rect() 括號內的值，逗號分隔，但逗號後面不加一個空格；
  • 對於屬性值或顏色參數，省略小於1 的小數前面的0 （例如，.5 代替 0.5;-.5px 代替-0.5px）；
  • 十六進位值應該全部小寫和盡量簡寫，例如， #fff 取代 #ffffff;
  • 避免為0 值指定單位，例如，以 margin: 0; 取代 margin: 0px;；
/*  Not recommended  */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Recommended */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

宣告順序

相關屬性應為一組，建議的樣式編寫順序

#1.Positioning

2. Box model

3.Typographic

4.Visual

由於定位（positioning）可以從正常的文件流中移除元素，並且還能覆蓋盒模型（box model）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。

其他屬性只是影響元件的內部（inside）或是不影響前兩組屬性，因此排在後面。 

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

引號使用

url() 、屬性選擇符、屬性值使用雙引號。 參考 Is quoting the value of url() really necessary?

/* Not recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

/* Recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

.selector[type="text"] {

}

媒體查詢（Media query）的位置

將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或放在文件底部。如果你把他們分開了，將來只會被大家遺忘。 

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

不要使用@import

#與 <link> 相比，@import 慢很多，不光增加額外的請求數，還會導致不可預料的問題。

替代方法：

  • 使用多個 元素；
  • 透過Sass 或Less 類似的CSS 預處理器將多個CSS 檔案編譯為一個檔案；
  • 其他CSS 檔案合併工具;

參考 don't use @import;

連結的樣式順序：

a: link -> a:visited -> a:hover -> a:active（LoVeHAte）

不需要新增瀏覽器廠商前綴​​

使用 Autoprefixer 自動加入瀏覽器廠商前綴​​，編寫CSS 時不需要加入瀏覽器前綴，直接使用標準的CSS 編寫。

Autoprefixer 透過 Can I use，依照相容的要求，為對應的 CSS 程式碼新增瀏覽器廠商前綴​​。