CSS命名規(guī)范

includecmath 發(fā)布于2019-08-30 13:17 / 2925人閱讀

摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對(duì)結(jié)構(gòu)的依賴增加重復(fù)性的使用幾種命名規(guī)范比較與在命名上相反的點(diǎn)可以放心使用，以為都是在模塊內(nèi)但不推薦當(dāng)前我們的網(wǎng)站略有思想更概括，中的，相當(dāng)于的，相當(dāng)于的，相當(dāng)于的中文

本篇介紹幾種CSS命名規(guī)范。（規(guī)范詳細(xì)請(qǐng)參考底部References)

一、NEC (nice easy css)

網(wǎng)易前端CSS開(kāi)源項(xiàng)目

1.1 樣式分類

重置和默認(rèn)：reset + base

布局(g-) 例如頭部，尾部，主體，側(cè)欄等

模塊(m-) 較大整體，如登錄注冊(cè)，搜索等

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

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

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

狀態(tài)(z-) 例如hover，選中等

j- 專門用于js獲取節(jié)點(diǎn)，勿占用

舉個(gè)例子：

1.2 命名規(guī)則

樣式命名時(shí)始終以以上幾類（g-等）開(kāi)頭，然后使用后代選擇器

約定后代選擇器不使用單個(gè)字母+“-”的形式，不使用單個(gè)字母

通過(guò)使用后代選擇器，==后代選擇器不需要考慮名字是否已被使用==，因?yàn)橹辉诋?dāng)前模塊生效
（還是有可能會(huì)污染，注意避免）

命名簡(jiǎn)約不失語(yǔ)義 .green2 --bad .wrap2 --good

相同語(yǔ)義的不同類命名 —可直接加數(shù)字或字母區(qū)分 .m-list .m-list2

出現(xiàn)率高的做成基類，再做擴(kuò)展類：
基類+擴(kuò)展類：class="m-list m-list-2” class="u-btn u-btn-hover”

1.3 代碼格式

選擇器，屬性和值小寫(xiě)

NEC規(guī)范推薦單行寫(xiě)完一個(gè)選擇器定義（sass，不適用）

盡量不要省略分號(hào)

省略0時(shí)的單位

十六進(jìn)制表示顏色，盡量縮寫(xiě)

根據(jù)屬性重要性順序書(shū)寫(xiě)

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

1.4 優(yōu)化方案

背景圖優(yōu)化合并

圖片本身的優(yōu)化
-- 色彩過(guò)于豐富無(wú)透明要求 --> jpg較高質(zhì)量

-- 色彩過(guò)于豐富且有透明或者陰影要求--> png24
-- 色彩不太豐富且無(wú)論有無(wú)透明要求--> png8

多張圖片合并的優(yōu)化
-- 排列方式

-- 合并后圖片大小不宜超過(guò)50k，
-- 為了保持一致性，記得保留PSD原圖

如果CSS能做到，不要用js
css控制視覺(jué)變化，js只需要更改classname

1.5 最佳實(shí)踐

統(tǒng)一語(yǔ)義理解及命名:

1.6 典型錯(cuò)誤

不要以沒(méi)有語(yǔ)義的標(biāo)簽作為選擇器
.m-nav div{}

不要越級(jí)控制
.m-xxx .m-yyy a{}

不要在頁(yè)面布局中使用后代選擇器
.g-xxx .btn{}

不要用頁(yè)面布局去控制模塊或者元件
.g-xxx .m-yyy

1.7 使用NEC的網(wǎng)站

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

二、AliceUI規(guī)范

Alice的樣式模塊組織方式追求扁平化方式，分為三個(gè)層級(jí)：


基礎(chǔ)框架（reset+iconfont+柵格）

通用模塊

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

任何模塊在頁(yè)面中應(yīng)該像一個(gè)盒模型，不和頁(yè)面的其他元素互相影響，完美的Alice模塊應(yīng)該是一個(gè)“口”字型

2.1 命名規(guī)范

用“-”做命名空間上的區(qū)隔，最小化兩個(gè)模塊之間的命名沖突

第一個(gè)前綴作為通用模塊標(biāo)識(shí)，各業(yè)務(wù)線選取自己的前綴

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

模塊內(nèi)部類名繼承上層名稱

不推薦這樣寫(xiě)，很容易造成命名沖突：

參看模塊的樣式：

Alice類命名規(guī)范

一個(gè)簡(jiǎn)單的使用Alice的例子：
https://github.com/aliceui/al...

三、BEM(Block,Element,Modifier)

Yandex團(tuán)隊(duì)提出的前端CSS命名方法論。
優(yōu)點(diǎn)：less confusing & recognizable

3.1 BEM定義


Block： 一個(gè)塊是一個(gè)獨(dú)立的實(shí)體，塊可以包含其他塊；  
例如一個(gè)搜索塊；

Element: 一個(gè)元素是塊的一部分，具有某種功能。元素是依賴上下文的，它們只有處于它們應(yīng)該屬于的塊的上下文時(shí)才有意義。
例如搜索塊里的input框或button；

Modifier: 修飾符作為一個(gè)塊或者一個(gè)元素的屬性，代表這個(gè)塊或者是元素在外觀或是行為上的改變。
例如tab選中高亮。

3.2 BEM命名約定

一種命名規(guī)則：

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

元素名：與塊名使用“__”連接(double underscore)，block-name__ele-name

修飾符名：使用“_”連接(single underscore)
對(duì)于Boolean類型修飾符 —— owner-name_mod-name;

對(duì)于key-value類型的修飾符 —— owner-name_mod-name_mod-val;

舉個(gè)例子：
html：

CSS:

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

其他命名規(guī)則也有很多，例如：

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

CamelCase style
例如MyBlock__SomeElem_modName_modVal

--BEM提供一種規(guī)范，具體命名規(guī)則可以根據(jù)個(gè)人偏好選擇

BEM的關(guān)鍵是光憑名字就可以判斷某個(gè)標(biāo)記是用來(lái)干什么的。通過(guò)瀏覽HTML代碼中的class屬性，你就能夠明白模塊之間是如何關(guān)聯(lián)的：有一些僅僅是組件，有一些則是這些組件的子孫或者是元素,還有一些是組件的其他形態(tài)或者是修飾符。
BEM可能看上去有點(diǎn)滑稽，而且有可能導(dǎo)致我們輸入更長(zhǎng)的文本（大部分編輯器都有自動(dòng)補(bǔ)全功能，而且gzip壓縮將會(huì)讓我們消除對(duì)文件體積的擔(dān)憂），但是它依舊強(qiáng)大。

3.3 使用BEM的網(wǎng)站

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

四、其他命名規(guī)范

OOCSS、SMACSS、SUITCSS、Atomic等
OOCSS:

減少對(duì) HTML 結(jié)構(gòu)的依賴

增加 CSS class 重復(fù)性的使用
http://www.w3cplus.com/css/oo...

幾種命名規(guī)范比較：
NEC 與 AliceUI 在命名上相反的點(diǎn)：

.m-list .title 可以放心使用，以為都是在模塊內(nèi),但AliceUI不推薦

當(dāng)前我們的網(wǎng)站略有OOCSS思想

BEM更概括，NEC中的g-，m-相當(dāng)于BEM的block，u-相當(dāng)于BEM的element, f-，z-,s-相當(dāng)于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)