有关前端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{} 

那么问题就迎刃而解了。