CSS BEM 書寫規範

原文位址

命名規範

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

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

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

-   中劃線 ：僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連接配接記号。
__  雙下劃線：雙下劃線用來連接配接塊和塊的子元素
_   單下劃線：單下劃線用來描述一個塊或者塊的子元素的一種狀态

type-block__element_modifier

塊（block）

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

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

針對塊的CSS類名會加一些字首（ ui-），這些字首在CSS中有類似命名空間的作用。

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

CSS中隻能使用類名（不能是ID）。
每一個塊名應該有一個命名空間（字首）
每一條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 字尾的檔案來存儲變量、混合代碼以及最終合并壓縮。

子less	注解
lib-base.less	預定義的變量，例如顔色、字号、字型
lib-mixins.less	用于混合的代碼，例如漸變、半透明的混合
lib-reset.less	初始化
lib-ui.less	顆粒化ui功能
xxx.less	子產品樣式
.less	檔案的引用順序會對最終編譯的樣式的作用域和優先級産生影響，請盡量按照由底層到自定義的順序來引用。

關于風格

書寫原則

原則上不會出現2層以上選擇器嵌套

使用BEM原則，用命名來解耦，所有類名都為一層，增加效率和複用性
兩層選擇器嵌套出現在.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>