css BEM 命名規(guī)范

BEM是塊(block)、元素(element)、修飾符(modifier)的簡寫,由 Yandex 團隊提出的一種前端 CSS 命名方法論。

BEM 命名約定的模式是:

.block {}
.block__element {}
.block--modifier {}

block 代表了更高級別的抽象或組件。
block__element 代表 .block 的后代,用于形成一個完整的 .block 的整體。
block--modifier 代表 .block 的不同狀態(tài)或不同版本。

BEM的優(yōu)勢是:讓前端代碼更容易閱讀和理解,更容易控制和擴展,更加健壯和明確,適合多人協(xié)作開發(fā)。

看到class名可以獲得更多的描述和更加清晰的結(jié)構(gòu),從其名字可以知道某個標(biāo)記的含義。通過查看 HTML 代碼中的 class 屬性,就能知道元素之間的關(guān)聯(lián)。

不足之處: 命名方式長而難看,書寫不方便??梢杂胠ess或者sass 預(yù)處理器。比如:less中 css 嵌套寫法,通過&符號去寫css。就方便了很多。

怎么使用Bem格式呢。

一個網(wǎng)站,會有網(wǎng)站的頭部組件,我們可以定義為 .header, 網(wǎng)站頭部子元素,會有導(dǎo)航,這塊元素可以定義為 .heander__nav。 導(dǎo)航中會有被選中的狀態(tài),我們可以定義為.header__nav--active。.當(dāng)我們.看到header__nav--active class名的時候,我們可以知道,他的結(jié)構(gòu)是什么樣的,當(dāng)前是什么樣的狀態(tài)。

什么時候應(yīng)該用 BEM 格式。

并不是每個地方都適合使用 BEM 命名方式。當(dāng)需要明確關(guān)聯(lián)性的模塊關(guān)系時,應(yīng)當(dāng)使用 BEM 格式。封裝復(fù)用性組件的時候,也需要使用BEM格式,比如 element-ui 組件庫 css 命名就是使用的BEM格式。

一些公共的單獨的樣式,就沒有必要使用 BEM 格式:

比如:

.hide {
    display: none !important;
}

只是用來隱藏元素的,就沒有必要使用了BEM格式了。

BEM是css命名規(guī)范的一種,還有OOCSS和SMAcss命名規(guī)范。不論是哪一種,都有它的優(yōu)點和缺點。沒有好壞之說,選擇適合的自己的就好。沒有使用BEM命名格式的前端小伙伴可以去了解一下。

代碼規(guī)范很重要,每種語言都有自己的規(guī)范,建議開發(fā)團隊,都制定對應(yīng)的代碼規(guī)范,大家都去執(zhí)行,不僅有助于自身的成長,還可以促進團隊合作,降低維護成本。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容