CSS命名方式=》BEM

時間：2016-11-04 20:04:53
原文地址：https://github.com/zhongxia245/blog/issues/48

1、背景

挺早就據說過BEM了，也大概的知道怎麼用，可是具體 BEM 指啥，具體有啥要求，還不是很清楚，而後今天就學習了下。

2、BEM（Block，Element，Modifier）

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其餘開發者來講更加透明並且更有意義。BEM命名約定更加嚴格，並且包含更多的信息，它們用於一個團隊開發一個耗時的大項目。

重要的是要注意，我使用的基於BEM的命名方式是通過Nicolas Gallagher修改過的。這篇文章中介紹的這種命名技術並非原始的BEM，但倒是一個我更喜歡的改進版。不管實際使用了什麼樣的符號，它們其實都是基於一樣的BEM原則。

命名約定的模式以下：

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

• .block 表明了更高級別的抽象或組件。
• .block__element 表明.block的後代，用於造成一個完整的.block的總體。
• .block--modifier表明.block的不一樣狀態或不一樣版本。
  之因此使用兩個連字符和下劃線而不是一個，是爲了讓你本身的塊能夠用單個連字符來界定，如：

.site-search{} /* 塊 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修飾符 */

3、總結

• B： block ，某一塊展現/功能區域（div, 好比： nav
• E： Element， 這塊展現/功能區域（div）裏面的某個元素，好比: nav__item
• M：Modifier， 某個元素或者某個塊的狀態，好比 nav--hide, nav__item--open 啥的

例子：

B：header-tabs //名字隨便
E：header-tabs__item //多個tab選項
M：header-tabs__item--active //選中狀態

4、參考文章

1. BEM —— 源自Yandex的CSS 命名方法論