[規範] CSS BEM 書寫規範

使用 BEM 命名規範，理論上講，每行 css 程式碼都只有一個選擇器。

BEM代表「區塊（block）,元素（element）,修飾符（modifier）」,我們常用這三個實體開發元件。

在選擇器中，由以下三種符合來表示擴充的關係：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

type-block__element_modifier

#區塊（block）

一個區塊是設計或佈局的一部分，它有具體且唯一地意義，要麼是語義上的要麼是視覺上的。

在大多數情況下，任何獨立的頁面元素（或複雜或簡單）都可以被視為一個區塊。它的HTML容器會有一個唯一的CSS類別名，也就是這個區塊的名字。

針對區塊的CSS類別名稱會加上一些前綴（ ui-），這些前綴在CSS中有類似 命名空間 的功能。

一個區塊的正式（實際上是半正式的）定義有以下三個基本原則：

1. CSS中只能使用類別名稱（不能是ID）。
2. 每一個區塊名稱應該有一個命名空間（前綴）
3. 每一條CSS規則必須屬於一個區塊。

例如：一個自訂清單 .list 是一個區塊，通常自訂清單是算在 mod 類別的，在這個情況下，一個 list 列表的block寫法應該是:

.list

元素（element）

區塊中的子元素是塊的子元素，而子元素的子元素在 bem 裡也被認為是塊的直接子元素。一個區塊中元素的類別名稱必須用父級區塊的名稱作為前綴。

如上面的例子，li.item 是清單的子元素，

.list{}.list .item{}.list{}.list__item{}

修飾符（modifier )

一個「修飾符」可以理解為一個區塊的特定狀態，標識著它持有一個特定的屬性。

用一個例子來解釋最好不過了。一個表示按鈕的區塊預設有三個大小：小，中，大。為了避免創建三個不同的區塊，最好是在區塊上加修飾符。這個修飾符應該有個名字（例如：size ）和值（ small，normal 或 big ）。

如上面的範例中，表示一個選取的列表，和一個啟動的列表項目

.list{}.list.select{}.list .item{}.list .item.active{}.list{}.list_select{}.list__item{}.list__item_active{}

LESS 書寫規格

使用 .less 後綴的檔案來儲存變數、混合程式碼以及最終合併壓縮。

##用於混合的程式碼，例如漸層、半透明的混合初始化顆粒化ui功能#模組樣式#

.less 檔案的引用順序會對最終編譯的樣式的作用域和優先權產生影響，請盡量按照由底層到自訂的順序來引用。

關於風格

#書寫原則

##1. 原則上不會出現

2層以上

選擇器巢狀#使用

BEM

原則，用命名來解耦，所有類別名稱都為一層，增加效率和復用性2. 兩層選擇器嵌套出現在

.mod-xxx__item_current

子元素的情況，如下：

使用建議的巢狀寫法

.xxx{}
.xxx__item{}
.xxx__item_current{}
// 嵌套写法
.xxx__item_current .mod-xxx__link{}

##推薦：

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

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

對應的HTML結構如下：

<ul class="xxx">
    <li class="xxx__item">第一项
        <div class="xxx__product-name">我是名称</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二项 且 当前选择项
        <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
         <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>

BEM 解決問題

##元件之間的完全解耦，不會造成命名空間的污染，如：.mod-xxx ul li 的寫法所帶來的潛在的巢狀風險。

效能

BEM 命名會使得Class 類別名稱變長，但經過gzip 壓縮後這個頻寬開銷可以忽略不計

#

子less	註解
lib-base.less	預先定義的變量，例如顏色、字號、字體
#lib-mixins.less
lib-reset.less
#lib-ui.less
xxx.less