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í)行，不僅有助于自身的成長，還可以促進團隊合作，降低維護成本。