BEM 簡介

BEM 是一種前端項目開發的方法學,由 Yandex 公司提出。BEM 的名稱來源于該方法學的三個組成部分的英文首字母,分別是塊(Block)、元素(Element)和修飾符(Modifier)。這三個不同的組成部分稱為 BEM 實體。

解決的問題

當一個項目比較大的時候,容易產出樣式沖突的問題。BEM 主要解決樣式的沖突的問題,以此幫助你在前端開發中實現可復用的組件和代碼共享。

感興趣的可以其他解決代碼樣式沖突的方案:【譯】CSS 模塊。

基本概念

塊

塊即是通常所說的 Web 應用開發中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。塊中封裝了組件相關的 JavaScript、CSS 代碼和 HTML 模板。由于塊是獨立的,可以在應用開發中進行復用,從而降低代碼重復并提高開發效率。塊可以放置在頁面上的任何位置,也可以互相嵌套。同一個塊可以在頁面上存在多個實例。塊的不同實例具有相似的結構。一個典型的塊的示例是菜單。一個項目中可以有多個不同的菜單,具體相似的結構和樣式。

塊的名稱應該是全局唯一的。一個頁面可以

元素

元素是塊中的組成部分。元素不能離開塊來使用。在菜單塊中,每個菜單項是塊中的元素。

修飾符

修飾符用來定義塊或元素的外觀和行為。同樣的塊在應用不同的修飾符之后,會有不同的外觀。當菜單塊出現在頁面上的不同位置時,可以有不同的樣式。菜單塊中的菜單項可以有選中或非選中的狀態。

例子

HTML

<ul >  <li >Menu Item 1</li>  <li >Menu Item 2</li>  <li >Menu Item 3</li></ul>

CSS

.menu { list-style: none;}.menu__item { font-weight: bold;}.menu__item--selected { color: red;}

BEM 常見問題

避免 .block__el1__el2

如

<p class='block'>    <p class='block__elem1'>        <p class='block__elem1__elem2'>            <p class='block__elem1__elem2__elem3'></p>        </p>    </p></p>

優化為

<p class='block'>    <p class='block__elem1'>        <p class='block__elem2'>            <p class='block__elem3'></p>        </p>    </p></p>

modify 影響元素的寫法

避免用 block-name–-modifier-name__element-name 的寫法

// bad<p >  <button ></button></p>// good<p >  <button ></button></p><style>.block--xmas .block__button {    /* Jingle bells, jingle bells, jingle all the way.*/}</style>

組件下的組件

避免用 block-name__block2-name 的寫法

// bad<p class='block'>    <p class='block__block2'>        <p class='block__block2__elem'>        </p>    </p></p>// good<p class='block'>    <p class='block2 block2--modifier'>        <p class='block2__elem'>        </p>    </p></p>

響應式組件的處理

用 @ 。如

<p ></p><style>@media (min-width: 15em) {  .block2@sm {}}</style>

拓展閱讀

• BEM 101
• Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them
• BEM FAQ
• BEMIT: Taking the BEM Naming Convention a Step Further Healthchecks 這塊挺有意思。

本文遵守創作共享CC BY-NC-SA 4.0協議 網絡平臺如需轉載必須與本人聯系確認。