使用 BEM 命名規(guī)范,理論上講,每行 css
代碼都只有一個選擇器。
BEM代表“塊(block),元素(element),修飾符(modifier)”,我們常用這三個實體開發(fā)組件。
在選擇器中,由以下三種符合來表示擴展的關(guān)系:
- 中劃線 :僅作為連字符使用,表示某個塊或者某個子元素的多單詞之間的連接記號。
__ 雙下劃線:雙下劃線用來連接塊和塊的子元素
_ 單下劃線:單下劃線用來描述一個塊或者塊的子元素的一種狀態(tài)
type-block__element_modifier
一個塊是設(shè)計或布局的一部分,它有具體且唯一地意義 ,要么是語義上的要么是視覺上的。
在大多數(shù)情況下,任何獨立的頁面元素(或復雜或簡單)都可以被視作一個塊。它的HTML容器會有一個唯一的CSS類名,也就是這個塊的名字。
針對塊的CSS類名會加一些前綴( ui-
),這些前綴在CSS中有類似 命名空間 的作用。
一個塊的正式(實際上是半正式的)定義有下面三個基本原則:
例如:一個自定義列表 .list
是一個塊,通常自定義列表是算在 mod
類別的,在這種情況下,一個 list
列表的block寫法應該為:
.list
塊中的子元素是塊的子元素,并且子元素的子元素在 bem
里也被認為是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱作為前綴。
如上面的例子,li.item
是列表的一個子元素,
.list{}
.list .item{}
.list{}
.list__item{}
一個“修飾符”可以理解為一個塊的特定狀態(tài),標識著它持有一個特定的屬性。
用一個例子來解釋最好不過了。一個表示按鈕的塊默認有三個大?。盒。?,大。為了避免創(chuàng)建三個不同的塊,最好是在塊上加修飾符。這個修飾符應該有個名字(比如:size
)和值( small
,normal
或者 big
)。
如上面的例子中,表示一個選中的列表,和一個激活的列表項
.list{}
.list.select{}
.list .item{}
.list .item.active{}
.list{}
.list_select{}
.list__item{}
.list__item_active{}
使用 .less
后綴的文件來存儲變量、混合代碼以及最終合并壓縮。
子less | 注解 |
---|---|
lib-base.less | 預定義的變量,例如顏色、字號、字體 |
lib-mixins.less | 用于混合的代碼,例如漸變、半透明的混合 |
lib-reset.less | 初始化 |
lib-ui.less | 顆?;痷i功能 |
xxx.less | 模塊樣式 |
.less
文件的引用順序會對最終編譯的樣式的作用域和優(yōu)先級產(chǎn)生影響,請盡量按照由底層到自定義的順序來引用。
2層以上
選擇器嵌套使用BEM
原則,用命名來解耦,所有類名都為一層,增加效率和復用性
.mod-xxx__item_current
子元素的情況,如下:使用推薦的嵌套寫法
常規(guī)寫法:
.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結(jié)構(gòu)如下:
<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>
組件之間的完全解耦,不會造成命名空間的污染,如:.mod-xxx ul li
的寫法帶來的潛在的嵌套風險。
BEM 命名會使得 Class 類名變長,但經(jīng)過 gzip 壓縮后這個帶寬開銷可以忽略不計
更多建議: