Bootstrap CSS編碼規範

語法

用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。
為選擇器分組時，將單獨的選擇器單獨放在一行。
為了程式碼的易讀性，在每個宣告區塊的左花括號前面加上一個空格。
宣告區塊的右花括號應單獨成行。
每個宣告語句的 : 後面應該要插入一個空格。
為了獲得更準確的錯誤報告，每個聲明都應該獨佔一行。
所有宣告語句都應以分號結尾。最後一條宣告語句後面的分號是可選的，但是，如果省略這個分號，你的程式碼可能會更容易出錯。
對於以逗號分隔的屬性值，每個逗號後面都應該插入一個空格（例如，box-shadow）。
不要在rgb()、rgba()、hsl()、hsla() 或rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
對於屬性值或顏色參數，省略小於1 的小數前面的0 （例如，.5 取代0.5; -.5px 代替-0.5px）。
十六進位值應該全部小寫，例如，#fff。在掃描文件時，小寫字元易於分辨，因為他們的形式更易於區分。
盡量使用簡寫形式的十六進位值，例如，用 #fff 取代 #ffffff。
為選擇器中的屬性加上雙引號，例如，input[type="text"]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。
避免為 0 值指定單位，例如，用 margin: 0; 取代 margin: 0px;。

對於這裡用到的術語有疑問嗎？請參考 Wikipedia 上的層疊樣式表 - 語法。

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

###########################################################################################################################################高

宣告順序

相關的屬性宣告應歸為一組，並依照下面的順序排列：

Positioning
Box model
Typographic
#Visual

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

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

完整的屬性清單及其排列順序請參考 Recess。

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

  /* Box-model */
  display: block;
  float: right;# display: block;
  float: right;
100pid
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serifcolor:#13px "Helvetica Neue", sans-serifcolor:#13px "Helvetica Neue", sans-serifcolor:#13px #height ;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid-

#  /* Misc */
  opacity: 1;
}

不要使用
@import

與`<link>` 標籤相比，

@import

指令慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：使用多個

<link>

透過Sass 或Less 類似的CSS 預處理器將多個CSS 檔案編譯為一個檔案
透過Rails、Jekyll 或其他系統中提供過CSS 檔案合併功能
請參考Steve Souders 的文章以了解更多知識。

<! -- Avoid @imports -->

媒體查詢（Media query）的位置

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

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min -width: 480px) {
  .element { ...}
  .element-avatar { ... }
#  .element-selected { ... }
}

# .element-selected { ... }

}

帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，透過縮排的方式，讓每個屬性的值在垂直方向對齊，這樣便於多行編輯。在 Textmate 中，使用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中，使用 Selection → Add Previous Line (⌃⇧↑) 和

Selection → Add Next Line

(⌃⇧↓)。

/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px -shadow: 0 1px 2px rgba(0,0,0,.15);

}

單行規則宣告

#對於只包含一個宣告

的樣式，為了易讀性和方便快速編輯，建議將語句放在同一行。對於帶有多條聲明的樣式，還是應將聲明分為多行。

這樣做的關鍵因素是為了錯誤偵測 -- 例如，CSS 校驗器指出在 183 行有語法錯誤。如果是單行單條聲明，你就不會忽略這個錯誤；如果是單行多條聲明的話，你就要仔細分析避免漏掉錯誤了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width:140px; }
.span2 { width:{140px; }
.span2 { width:{p140px; }
.span2 { width:{p140px; }
.span2 { width:{p140px; }
. }

/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px—## -image: url(../style/images/sprite.png);
}

.icon { background-position: 0 0; }# .icon-home ; }

.icon-account { background-position: 0 -40px; }######

簡寫形式的屬性宣告

在需要顯示地設定所有值的情況下，應盡量限制使用簡寫形式的屬性宣告。常見的濫用簡寫屬性宣告的情況如下：

padding
margin
font
#background
border
border-radius

#大部分情況下，我們不需要為簡寫形式的屬性聲明指定所有值。例如，HTML 的 heading 元素只需要設定上、下邊距（margin）的值，因此，在必要的時候，只需覆寫這兩個值即可。過度使用簡寫形式的屬性聲明會導致程式碼混亂，並且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

MDN（Mozilla Developer Network）上一片非常好的關於shorthand properties 的文章，對於不太熟悉簡寫屬性聲明及其行為的用戶很有用。

/* Bad example */
.element {
  margin: 0 0 10px;
#  background: red;
  background: url( images/image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
;
  background-color: red;
  background-image: url("../style/images/image.jpg");
  border-top-left-radius: 3px;
borderorder -top-right-radius: 3px;
}

Less 和Sass 中的巢狀

避免非必要的巢狀。這是因為雖然你可以使用嵌套，但是並不意味著應該使用嵌套。只有在必須將樣式限制在父元素內（也就是後代選擇器），並且存在多個需要嵌套的元素時才使用巢狀。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr }
.table > thead >
// With nesting
.table > thead > tr {
  > th { … }
  >td {… … }
  >

註解

程式碼是由人寫並維護的。請確保你的程式碼能夠自我描述、註解良好且易於他人理解。好的程式碼註解能夠傳達上下文關係和程式碼目的。不要簡單地重申組件或 class 名稱。

對於較長的註釋，務必書寫完整的句子；對於一般性註解，可以書寫簡潔的短語。

/* Bad example */
/* Modal header */
.modal-header {
...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
#}

class 名稱中只能出現小寫字元和破折號（dashe）（不是底線，也不是駝峰命名法）。破折號應用於相關 class 的命名（類似於命名空間）（例如，.btn 和 .btn-danger）。
避免過度任意的簡寫。
.btn
button
，但是
.s
使用有意義的名稱。使用有組織的或目的明確的名稱，不要使用表現形式（presentational）的名稱。

是基於最近的父 class 或基本（base） class 作為新 class 的前綴。

使用
.js-*
class 來識別行為（與樣式相對），並且不要將這些 class 包含到 CSS 檔案中。

在為 Sass 和 Less 變數命名是也可以參考上面列出的各項規格。

/* Bad example */###.t { ... }###.red { ... }###.header { ... }##### #/* Good example */###.tweet { ... }###.important { ... }###.tweet-header { ... }######

選擇器

對於通用元素使用 class ，這樣利於渲染效能的最佳化。
對於經常出現的元件，避免使用屬性選擇器（例如，[class^="..."]）。瀏覽器的效能會受到這些因素的影響。
選擇器要盡可能短，並且盡量限制組成選擇器的元素數，建議不要超過 3 。
只有在必要的時候才將class 限制在最近的父元素內（也就是後代選擇器）（例如，不使用有前綴的class 時-- 前綴類似於命名空間）。

.tweet .avatar { ... }

程式碼組織
以元件為單位組織程式碼片段。
制定一致的註解規格。
使用一致的空白符號將程式碼分隔成區塊，這樣利於掃描較大的文件。

如果使用了多個 CSS 文件，將其按照元件而非頁面的形式分拆，因為頁面會被重組，而元件只會被移動。

/*
* Component section heading
*/

.element { ... }

#/*
* Component section heading
*
* Sometimes you need to include optional context for the
.element { ... }

/* Contextual sub-component or modifer */

.element-heading { ... }

編輯器配置

.element-heading { ... }

編輯器設定
將你的編輯器按照下面的配置進行設置，以避免常見的程式碼不一致和差異：
#用兩個空格代替製表符（soft-tab 即用空格代表tab 符）。
儲存檔案時，刪除尾部的空白符。

設定檔案編碼為 UTF-8。

在檔案結尾加上一個空白行。

###參考文件並將這些設定資訊新增至專案的 ###.editorconfig### 檔案。例如：Bootstrap 中的 .editorconfig 實例。更多資訊請參考 about EditorConfig。 ############

← Bootstrap HTML編碼規範