非常早就知道BEM，并且也一直在用，只是用得比较少。

先让我们看看BEM是什么：

定义

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS Class 命名方法。

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

block

block这里翻译成了块，但这个实际开发中，我更倾向于把它认为是一个组件的唯一标识。

element

element就是一个元素，其实这里指的是block下的子元素。

modifier

理解为修饰器，就是标识同一个元素的其他不同状态。比方说一个显示价格的区域，正常情况下它是显示价格的，但是当产品售罄了，这个时候这个价格区块就要做调整了。那么，这个时候modifier就很好的阐述了这个不同。

好与坏

好了，说了上面的介绍，那它具体有什么好处呢？

1. 可读性极好。对比我们写less代码的嵌套，这个真的是一目了然。
2. 避免样式冲突覆盖。主要是强调唯一的block，以及没有嵌套。基本不可能有样式冲突覆盖的可能。
3. 性能非常好。因为没有嵌套。

说了好处，肯定要谈坏处：

1. 太长了，很影响书写效率。
2. 不爽。习惯了嵌套写法，再去用这个真的是不要不要的。

我的做法

1. 小的或者通用的组件可以这么去做。
2. 大的层面，我们以页面划分，使用.pg-xxx, xxx代表页面的唯一标识。说白了相当于命名空间。
3. 依旧使用嵌套写法，只是严格要求使用 > ，这个就是避免样式冲突覆盖。但是导致的就是嵌套非常非常深。不过鉴于一个模块写过一次后基本不会大变，还是可以接受的。

最后

第一次看到BEM说法还是让人耳目一新，特别是在组件开发大行其道的时代，项目越来越大，避免冲突和覆盖是大家都需要考虑的问题。

不管哪种写法，没有最好，只有最适合自己团队的。