[規(guī)范] CSS BEM 書(shū)寫(xiě)規(guī)范

使用 BEM 命名規(guī)范，理論上講，每行 css 代碼都只有一個(gè)選擇器。

BEM代表“塊（block）,元素（element）,修飾符（modifier）”,我們常用這三個(gè)實(shí)體開(kāi)發(fā)組件。

在選擇器中，由以下三種符合來(lái)表示擴(kuò)展的關(guān)系：

-   中劃線(xiàn) ：僅作為連字符使用，表示某個(gè)塊或者某個(gè)子元素的多單詞之間的連接記號(hào)。
__  雙下劃線(xiàn)：雙下劃線(xiàn)用來(lái)連接塊和塊的子元素
_   單下劃線(xiàn)：?jiǎn)蜗聞澗€(xiàn)用來(lái)描述一個(gè)塊或者塊的子元素的一種狀態(tài)

type-block__element_modifier

塊（block）

一個(gè)塊是設(shè)計(jì)或布局的一部分，它有具體且唯一地意義 ，要么是語(yǔ)義上的要么是視覺(jué)上的。

在大多數(shù)情況下，任何獨(dú)立的頁(yè)面元素（或復(fù)雜或簡(jiǎn)單）都可以被視作一個(gè)塊。它的HTML容器會(huì)有一個(gè)唯一的CSS類(lèi)名，也就是這個(gè)塊的名字。

針對(duì)塊的CSS類(lèi)名會(huì)加一些前綴（ ui-），這些前綴在CSS中有類(lèi)似 命名空間 的作用。

一個(gè)塊的正式（實(shí)際上是半正式的）定義有下面三個(gè)基本原則：

1. CSS中只能使用類(lèi)名（不能是ID）。
2. 每一個(gè)塊名應(yīng)該有一個(gè)命名空間（前綴）
3. 每一條CSS規(guī)則必須屬于一個(gè)塊。

例如：一個(gè)自定義列表 .list 是一個(gè)塊，通常自定義列表是算在 mod 類(lèi)別的，在這種情況下，一個(gè) list 列表的block寫(xiě)法應(yīng)該為:

.list   

元素（element）

塊中的子元素是塊的子元素，并且子元素的子元素在 bem 里也被認(rèn)為是塊的直接子元素。一個(gè)塊中元素的類(lèi)名必須用父級(jí)塊的名稱(chēng)作為前綴。

如上面的例子，li.item 是列表的一個(gè)子元素，

.list{}
.list .item{}


.list{}
.list__item{}

修飾符（modifier）

一個(gè)“修飾符”可以理解為一個(gè)塊的特定狀態(tài)，標(biāo)識(shí)著它持有一個(gè)特定的屬性。

用一個(gè)例子來(lái)解釋最好不過(guò)了。一個(gè)表示按鈕的塊默認(rèn)有三個(gè)大?。盒?，中，大。為了避免創(chuàng)建三個(gè)不同的塊，最好是在塊上加修飾符。這個(gè)修飾符應(yīng)該有個(gè)名字（比如：size ）和值（ small，normal 或者 big ）。

如上面的例子中，表示一個(gè)選中的列表，和一個(gè)激活的列表項(xiàng)

.list{}
.list.select{}
.list .item{}
.list .item.active{}


.list{}
.list_select{}
.list__item{}
.list__item_active{}

LESS 書(shū)寫(xiě)規(guī)范

使用 .less 后綴的文件來(lái)存儲(chǔ)變量、混合代碼以及最終合并壓縮。

.less 文件的引用順序會(huì)對(duì)最終編譯的樣式的作用域和優(yōu)先級(jí)產(chǎn)生影響，請(qǐng)盡量按照由底層到自定義的順序來(lái)引用。

關(guān)于風(fēng)格

書(shū)寫(xiě)原則

1. 原則上不會(huì)出現(xiàn)2層以上選擇器嵌套

使用BEM原則，用命名來(lái)解耦，所有類(lèi)名都為一層，增加效率和復(fù)用性

2. 兩層選擇器嵌套出現(xiàn)在.mod-xxx__item_current子元素的情況，如下：

使用推薦的嵌套寫(xiě)法

常規(guī)寫(xiě)法：

.xxx{}
.xxx__item{}
.xxx__item_current{}
// 嵌套寫(xiě)法
.xxx__item_current .mod-xxx__link{}

推薦：

.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套寫(xiě)法
.xxx__item_current{
    .xxx__link{}
}

對(duì)應(yīng)的HTML結(jié)構(gòu)如下：

<ul class="xxx">
    <li class="xxx__item">第一項(xiàng)
        <div class="xxx__product-name">我是名稱(chēng)</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看類(lèi)名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二項(xiàng) 且 當(dāng)前選擇項(xiàng)
        <div class="xxx__product-name">我是名稱(chēng)</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三項(xiàng) 且 特殊高亮
         <div class="xxx__product-name">我是名稱(chēng)</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>

BEM 解決問(wèn)題

組件之間的完全解耦，不會(huì)造成命名空間的污染，如：.mod-xxx ul li 的寫(xiě)法帶來(lái)的潛在的嵌套風(fēng)險(xiǎn)。

性能

BEM 命名會(huì)使得 Class 類(lèi)名變長(zhǎng)，但經(jīng)過(guò) gzip 壓縮后這個(gè)帶寬開(kāi)銷(xiāo)可以忽略不計(jì)