通用約定

代碼組織

• 以組件為單位組織代碼段；
• 制定一致的注釋規(guī)范；
• 組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
• 如果使用了多個 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()括號內(nèi)的值，逗號分隔，但逗號后不添加一個空格；
• 對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 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）相關的樣式，因此排在首位。盒模型決定了組件的尺寸和位置，因此排在第二位。

其他屬性只是影響組件的內(nèi)部（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("http://www.google.com/css/maia.css");

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

.selector[type="text"] {

}

媒體查詢（Media query）的位置

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

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

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

不要使用 @import

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

替代辦法：

• 使用多個 元素；
• 通過 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 代碼添加瀏覽器廠商前綴。

字體排印

暫時參考網(wǎng)頁字體排印指南。

TODO

模塊組織

任何超過 1000 行的 CSS 代碼，你都曾經(jīng)歷過這樣的體驗：

• 這個 class 到底是什么意思呢？
• 這個 class 在哪里被使用呢？
• 如果我創(chuàng)建一個 xxoo class，會造成沖突嗎？

Reasonable System for CSS Stylesheet Structure 的目標就是解決以上問題，它不是一個框架，而是通過規(guī)范，讓你構建更健壯和可維護的 CSS 代碼。

Components（組件）

http://wiki.jikexueyuan.com/project/web-development/images/1.png" alt="" />

從 Components 的角度思考，將網(wǎng)站的模塊都作為一個獨立的 Components。

Naming components （組件命名）

Components 最少以兩個單詞命名，通過 - 分離，例如：

• 點贊按鈕 (.like-button)
• 搜索框 (.search-form)
• 文章卡片 (.article-card)

Elements（元素）

http://wiki.jikexueyuan.com/project/web-development/images/2.png" alt="" />

Elements 是 Components 中的元素

Naming elements（元素命名）

Elements 的類名應盡可能僅有一個單詞。

 .search-form {
    > .field { /* ... */ }
    > .action { /* ... */ }
  }
On multiple words （多個單詞）

對于倘若需要兩個或以上單詞表達的 Elements 類名，不應使用中劃線和下劃線連接，應直接連接。

  .profile-box {
    > .firstname { /* ... */ }
    > .lastname { /* ... */ }
    > .avatar { /* ... */ }
  }

Avoid tag selectors（避免標簽選擇器）

任何時候盡可能使用 classnames。標簽選擇器在使用上沒有問題，但是其性能上稍弱，并且表意不明確。

  .article-card {
    > h3    { /* ? avoid */ }
    > .name { /* ? better */ }
  }

Variants（變體）

http://wiki.jikexueyuan.com/project/web-development/images/3.png" alt="" />

Components 和 Elements 可能都會擁有 Variants。

Naming variants（變體命名）

Variants 的 classname 應帶有前綴中劃線 -

  .like-button {
    &.-wide { /* ... */ }
    &.-short { /* ... */ }
    &.-disabled { /* ... */ }
  }

Element variants（元素變體）

  .shopping-card {
    > .title { /* ... */ }
    > .title.-small { /* ... */ }
  }

Dash prefixes（中劃線前綴）

為什么使用中劃線作為變體的前綴？

• 它可以避免歧義與 Elements
• CSS class 僅能以單詞和 _ 或 - 開頭
• 中劃線比下劃線更容易輸出

Layout （布局）

http://wiki.jikexueyuan.com/project/web-development/images/4.png" alt="" />

Avoid positioning properties（避免定位屬性）

Components 應該在不同的上下文中都可以復用，所以應避免設置以下屬性：

• Positioning (position, top, left, right, bottom)
• Floats (float, clear)
• Margins (margin)
• Dimensions (width, height) *

Fixed dimensions（固定尺寸）

頭像和 logos 這些元素應該設置固定尺寸（寬度，高度...）。

Define positioning in parents（在父元素中設置定位）

倘若你需要為組件設置定位，應將在組件的上下文（父元素）中進行處理，比如以下例子中，將 widths 和 floats 應用在 list component(.article-list)當中，而不是 component(.article-card)自身。

  .article-list {
    & {
      @include clearfix;
    }

    > .article-card {
      width: 33.3%;
      float: left;
    }
  }

  .article-card {
    & { /* ... */ }
    > .image { /* ... */ }
    > .title { /* ... */ }
    > .category { /* ... */ }
  }

Avoid over-nesting（避免過分嵌套）

當出現(xiàn)多個嵌套的時候容易失去控制，應保持不超過一個嵌套。

  /* ? Avoid: 3 levels of nesting */
  .image-frame {
    > .description {
      /* ... */

      > .icon {
        /* ... */
      }
    }
  }

  /* ? Better: 2 levels */
  .image-frame {
    > .description { /* ... */ }
    > .description > .icon { /* ... */ }
  }

Apprehensions（顧慮）

• 中劃線-是一坨糟糕的玩意：其實你可以選擇性的使用，只要將 Components, Elements, Variants 記在心上即可。
• 我有時候想不出兩個單詞唉：有些組件的確使用一個單詞就能表意，比如 aleter。但其實你可以使用后綴，使其意識更加明確。

比如塊級元素：

• .alert-box
• .alert-card
• .alert-block

或行內(nèi)級元素

• .link-button
• .link-span

Terminologies（術語）

RSCSS 與其他 CSS 模塊組織系統(tǒng)相似的概念

Summary（總結）

• 以 Components 的角度思考，以兩個單詞命名（.screenshot-image）
• Components 中的 Elements，以一個單詞命名（.blog-post .title）
• Variants，以中劃線-作為前綴（.shop-banner.-with-icon）
• Components 可以互相嵌套
• 記住，你可以通過繼承讓事情變得更簡單

LESS 規(guī)范

代碼組織

代碼按一下順序組織：

1. @import
2. 變量聲明
3. 樣式聲明

@import "mixins/size.less";

@default-text-color: #333;

.page {
  width: 960px;
  margin: 0 auto;
}

@import 語句

@import 語句引用的文需要寫在一對引號內(nèi)，.less 后綴不得省略。引號使用 ' 和 " 均可，但在同一項目內(nèi)需統(tǒng)一。

/* Not recommended */
@import "mixins/size";
@import 'mixins/grid.less';

/* Recommended */
@import "mixins/size.less";
@import "mixins/grid.less";

混入（Mixin）

1. 在定義 mixin 時，如果 mixin 名稱不是一個需要使用的 className，必須加上括號，否則即使不被調(diào)用也會輸出到 CSS 中。

2. 如果混入的是本身不輸出內(nèi)容的 mixin，需要在 mixin 后添加括號（即使不傳參數(shù)），以區(qū)分這是否是一個 className。

/* Not recommended */
.big-text {
  font-size: 2em;
}

h3 {
  .big-text;
  .clearfix;
}

/* Recommended */
.big-text() {
  font-size: 2em;
}

h3 {
  .big-text(); /* 1 */
  .clearfix(); /* 2 */
}

避免嵌套層級過多

1. 將嵌套深度限制在 2 級。對于超過 3 級的嵌套，給予重新評估。這可以避免出現(xiàn)過于詳實的 CSS 選擇器。
2. 避免大量的嵌套規(guī)則。當可讀性受到影響時，將之打斷。推薦避免出現(xiàn)多于 20 行的嵌套規(guī)則出現(xiàn)。

字符串插值

變量可以用類似 ruby 和 php 的方式嵌入到字符串中，像 @{name} 這樣的結構:@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");

性能優(yōu)化

慎重選擇高消耗的樣式

高消耗屬性在繪制前需要瀏覽器進行大量計算：

• box-shadows
• border-radius
• transparency
• transforms
• CSS filters（性能殺手）

避免過分重排

當發(fā)生重排的時候，瀏覽器需要重新計算布局位置與大小，更多詳情。

常見的重排元素:

• width
• height
• padding
• margin
• display
• border-width
• position
• top
• left
• right
• bottom
• font-size
• float
• text-align
• overflow-y
• font-weight
• overflow
• font-family
• line-height
• vertical-align
• clear
• white-space
• min-height

正確使用 Display 的屬性

Display 屬性會影響頁面的渲染，請合理使用。

• display: inline 后不應該再使用 width、height、margin、padding 以及 float；
• display: inline-block 后不應該再使用 float；
• display: block 后不應該再使用 vertical-align；
• display: table-* 后不應該再使用 margin 或者 float；

不濫用 Float

Float 在渲染時計算量比較大，盡量減少使用。

動畫性能優(yōu)化

動畫的實現(xiàn)原理，是利用了人眼的 “視覺暫留” 現(xiàn)象，在短時間內(nèi)連續(xù)播放數(shù)幅靜止的畫面，使肉眼因視覺殘象產(chǎn)生錯覺，而誤以為畫面在 “動”。

動畫的基本概念：

• 幀：在動畫過程中，每一幅靜止畫面即為一 “幀”；
• 幀率：即每秒鐘播放的靜止畫面的數(shù)量，單位是 fps(Frame per second)；
• 幀時長：即每一幅靜止畫面的停留時間，單位一般是 ms(毫秒)；
• 跳幀 (掉幀 / 丟幀)：在幀率固定的動畫中，某一幀的時長遠高于平均幀時長，導致其后續(xù)數(shù)幀被擠壓而丟失的現(xiàn)象。

一般瀏覽器的渲染刷新頻率是 60 fps，所以在網(wǎng)頁當中，幀率如果達到 50-60 fps 的動畫將會相當流暢，讓人感到舒適。

• 如果使用基于 javaScript 的動畫，盡量使用 requestAnimationFrame。避免使用 setTimeout，setInterval。
• 避免通過類似 jQuery animate()-style 改變每幀的樣式，使用 CSS 聲明動畫會得到更好的瀏覽器優(yōu)化。
• 使用 translate 取代 absolute 定位就會得到更好的 fps，動畫會更順滑。

http://wiki.jikexueyuan.com/project/web-development/images/5.png" alt="" />

多利用硬件能力，如通過 3D 變形開啟 GPU 加速

一般在 Chrome 中，3D 或透視變換（perspective transform）CSS 屬性和對 opacity 進行 CSS 動畫會創(chuàng)建新的圖層，在硬件加速渲染通道的優(yōu)化下，GPU 完成 3D 變形等操作后，將圖層進行復合操作（Compesite Layers），從而避免觸發(fā)瀏覽器大面積重繪和重排。

注：3D 變形會消耗更多的內(nèi)存和功耗。

使用 translate3d 右移 500px 的動畫流暢度要明顯優(yōu)于直接使用 left：

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

提升 CSS 選擇器性能

CSS 選擇器對性能的影響源于瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優(yōu)化選擇器的原則是應盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機制， 如子選擇器規(guī)則：

#header > a {font-weight:blod;}

我們中的大多數(shù)人都是從左到右的閱讀習慣，會習慣性的設定瀏覽器也是從左到右的方式進行匹配規(guī)則，推測這條規(guī)則的開銷并不高。

我們會假設瀏覽器以這樣的方式工作：尋找 id 為 header 的元素，然后將樣式規(guī)則應用到直系子元素中的 a 元素上。我們知道文檔中只有一個 id 為 header 的元素，并且它只有幾個 a 元素的子節(jié)點，所以這個 CSS 選擇器應該相當高效。

事實上，卻恰恰相反，CSS 選擇器是從右到左進行規(guī)則匹配。了解這個機制后，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的 a 元素并且確定其父元素的 id 是否為 header 。

如果把例子的子選擇器改為后代選擇器則會開銷更多，在遍歷頁面中所有 a 元素后還需向其上級遍歷直到根節(jié)點。

#header  a {font-weight:blod;}

\ 理解了 CSS 選擇器從右到左匹配的機制后，明白只要當前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的選擇符，或者因為不匹配而退出。我們把最右邊選擇符稱之為關鍵選擇器。——更多詳情

1.避免使用通用選擇器

/* Not recommended */
.content * {color: red;}

瀏覽器匹配文檔中所有的元素后分別向上逐級匹配 class 為 content 的元素，直到文檔的根節(jié)點。因此其匹配開銷是非常大的，所以應避免使用關鍵選擇器是通配選擇器的情況。

2.避免使用標簽或 class 選擇器限制 id 選擇器

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3.避免使用標簽限制 class 選擇器

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4.避免使用多層標簽選擇器。使用 class 選擇器替換，減少 css 查找

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5.避免使用子選擇器

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6.使用繼承

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }