CSS命名規範

本篇介紹幾種CSS命名規範。 （規範詳細請參考底部References)

1、NEC (nice easy css)

網易前端CSS開源項目

1.1 樣式分類

• 重置和默認：reset + base

• 佈局(g-) 例如頭部，尾部，主體，側欄等

• 模塊(m-) 較大總體，如登陸註冊，搜索等

• 元件(u-) 不可再分個體，例如按鈕，input框等

• 功能(f-) 使用頻率較高樣式，例如清除浮動

• 皮膚(s-) 例如文字色，背景色，邊框色等

• 狀態(z-) 例如hover，選中等

• j- 專門用於js獲取節點，勿佔用

舉個例子：

1.2 命名規則

• 樣式命名時始終以以上幾類（g-等）開頭，而後使用後代選擇器

• 約定後代選擇器不使用單個字母+「-」的形式，不使用單個字母

• 經過使用後代選擇器，==後代選擇器不須要考慮名字是否已被使用==，由於只在當前模塊生效
  （仍是有可能會污染，注意避免）

• 命名簡約不失語義 .green2 --bad .wrap2 --good

• 相同語義的不一樣類命名 —可直接加數字或字母區分 .m-list .m-list2

• 出現率高的作成基類，再作擴展類：
  基類+擴展類 ：class="m-list m-list-2」 class="u-btn u-btn-hover」

1.3 代碼格式

• 選擇器，屬性和值小寫

• NEC規範推薦單行寫完一個選擇器定義（sass，不適用）

• 儘可能不要省略分號

• 省略0時的單位

• 十六進制表示顏色，儘可能縮寫

• 根據屬性重要性順序書寫

• 按佈局、盒模型，修飾的順序
  推薦插件css comb （sublime text 插件）

1.4 優化方案

• 背景圖優化合並

  • 圖片自己的優化
    -- 色彩過於豐富無透明要求 --> jpg較高質量

-- 色彩過於豐富且有透明或者陰影要求--> png24
-- 色彩不太豐富且不管有無透明要求--> png8

• 多張圖片合併的優化
  -- 排列方式

-- 合併後圖片大小不宜超過50k，
-- 爲了保持一致性，記得保留PSD原圖

• 若是CSS能作到，不要用js
  css控制視覺變化，js只須要更改classname

1.5 最佳實踐

統一語義理解及命名:

1.6 典型錯誤

• 不要以沒有語義的標籤做爲選擇器
  .m-nav div{}

• 不要越級控制
  .m-xxx .m-yyy a{}

• 不要在頁面佈局中使用後代選擇器
  .g-xxx .btn{}

• 不要用頁面佈局去控制模塊或者元件
  .g-xxx .m-yyy

1.7 使用NEC的網站

http://nec.netease.com/case
http://yuedu.163.com/

2、AliceUI規範

• Alice的樣式模塊組織方式追求扁平化方式，分爲三個層級：

• 基礎框架（reset+iconfont+柵格）

• 通用模塊

• 頁面樣式 (繼承通用模塊)

• 任何模塊在頁面中應該像一個盒模型，不和頁面的其餘元素互相影響，完美的Alice模塊應該是一個「口」字型

2.1 命名規範

• 用「-」作命名空間上的區隔，最小化兩個模塊之間的命名衝突

• 第一個前綴做爲通用模塊標識，各業務線選取本身的前綴

• 模塊名是必選的，要求表意的

• 模塊內部類名繼承上層名稱

<div class="ui-box">
   <h3 class="ui-box-title"></h3>
   <p class="ui-box-conent"></p>
</div>

不推薦這樣寫，很容易形成命名衝突：

<div class="ui-box">
   <h3 class="title"></h3>
   <p class="conent"></p>
</div>

參看模塊的樣式：

Alice類命名規範

一個簡單的使用Alice的例子：
https://github.com/aliceui/al...

3、BEM(Block,Element,Modifier)

Yandex團隊提出的前端CSS命名方法論。
優勢：less confusing & recognizable

3.1 BEM定義

• Block： 一個塊是一個獨立的實體，塊能夠包含其餘塊；
  例如一個搜索塊；

• Element: 一個元素是塊的一部分，具備某種功能。元素是依賴上下文的，它們只有處於它們應該屬於的塊的上下文時纔有意義。
  例如搜索塊裏的input框或button；

• Modifier: 修飾符做爲一個塊或者一個元素的屬性，表明這個塊或者是元素在外觀或是行爲上的改變。
  例如tab選中高亮。

3.2 BEM命名約定

一種命名規則：

• 塊名：block-name，它爲元素和修飾符定義了命名空間

• 元素名：與塊名使用「__」鏈接(double underscore)，block-name__ele-name

• 修飾符名：使用「_」鏈接(single underscore)
  對於Boolean類型修飾符 —— owner-name_mod-name;

對於key-value類型的修飾符 —— owner-name_mod-name_mod-val;

舉個例子：
html：

<form class="form form_login form_theme_forest">
    <input class="form__input">
    <input class="form__submit form__submit_disabled">
</form>

CSS:

.form {}
.form_theme_forest {}
.form_login {}
.form__input {}
.form__submit {}
.form__submit_disabled {}

其餘命名規則也有不少，例如：

• Two dash style
  例如：block-name__elem-name--mod-name

• CamelCase style
  例如MyBlock__SomeElem_modName_modVal

--BEM提供一種規範，具體命名規則能夠根據我的偏好選擇

BEM的關鍵是光憑名字就能夠判斷某個標記是用來幹什麼的。經過瀏覽HTML代碼中的class屬性，你就可以明白模塊之間是如何關聯的：有一些僅僅是組件，有一些則是這些組件的子孫或者是元素,還有一些是組件的其餘形態或者是修飾符。
BEM可能看上去有點滑稽，並且有可能致使咱們輸入更長的文本（大部分編輯器都有自動補全功能，並且gzip壓縮將會讓咱們消除對文件體積的擔心），可是它依舊強大。

3.3 使用BEM的網站

http://company.yandex.ru/
https://hh.ru/

4、其餘命名規範

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

• 減小對 HTML 結構的依賴

• 增長 CSS class 重複性的使用
  http://www.w3cplus.com/css/oo...

幾種命名規範比較：

• NEC 與 AliceUI 在命名上相反的點：

.m-list .title 能夠放心使用，覺得都是在模塊內,但AliceUI不推薦

• 當前咱們的網站略有OOCSS思想

• BEM更歸納，NEC中的g-，m-至關於BEM的block，u-至關於BEM的element, f-，z-,s-至關於BEM的modifier.

References

[1].http://nec.netease.com/
[2].https://github.com/aliceui/al...
[3].http://getbem.com/introduction/ (BEM)
[4].https://en.bem.info/methodolo...
**http://www.w3cplus.com/css/be...中文)
[5].https://segmentfault.com/a/11... (BEM)