有關前端BEM命名方式的思考

最初的思考

思考來源於要給切圖網改一次版，做爲前端開發服務商，我以爲應該要有本身的一款前端CSS框架，而且這個框架不該該只是隨便寫寫，最好可以用在官網上，拿官網作背書，因而在研究了火狐、adobe、微軟、google amp等官網之後，寫了一款quickly.css響應式前端框架而且開源，而且用在了新版網站上。

問題？

在寫框架的時候，定義了這麼一個類 .card 它能夠用在不少場合。而後 .card 下面定義了幾個子元素，以下：

.card-head {} .card-body{} .card-foot{} 

而後.card 自己還有不少種狀態，以靈活的適應不一樣的場合，以下

.card-border{} /*帶邊框的*/ .card-shadow{} /* 帶陰影的*/ .card-colorful{} /*彩色的*/ 

那麼實際的運用是這樣的：

<div class="card card-colorful card-shadow"> <div class="card-head"> </div> <div class="card-body"> </div> </div> 

綜上能夠發現，通常人在使用的時候很難搞清楚 .card-colorful 和 .card-body 有什麼區別， 其實一個是對形態的定義，一個是下面的子元素，因此問題就這樣產生了。有沒有辦法讓人經過命名一眼就能辨別，哪是子元素，哪是修飾符呢？ 結合腦海裏的知識我首先想到了BEM 。

BEM ？

Bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫，由 Yandex 團隊提出的一種前端 CSS 命名方法論。

BEM 命名約定的模式是：

.block {}
.block__element {}
.block–modifier {}
block 表明了更高級別的抽象或組件。
block__element 表明 .block 的後代，用於造成一個完整的 .block 的總體。
block–modifier 表明 .block 的不一樣狀態或不一樣版本。

使用兩個連字符和下劃線而不是一個，是爲了讓你本身的塊能夠用單個連字符來界定。如：

.sub-block__element {}
.sub-block–modifier {}

好了，咱們在來嘗試一下，以前碰到的問題，用BEM命名方式可否解決，實際quickly框架是有命名空間的以qui開頭，那麼結合BEM的命名方式以下：

.qui-card{} .qui-card--colorful{} .qui-card__head{} .qui-card__body{} .qui-card__foot{} 

那麼問題就迎刃而解了。