为什么使用 BEM

在写css的时候，你是否会经常碰到"--"和"__",它们是什么意思？它们的出现是源于-> BEM.
而我们为什么使用 [BEM]？因为它试图从当今关于模块化的CSS中获得最大收益：

• 避免继承，并通过对每个元素使用唯一的 CSS 类来提供某种作用域。 -->.my-component__list-item
• 通过将 CSS 特异性保持在最低级别来减少样式冲突。 看到这里在这里说不定你还是云里雾里，那么再让我们浅谈一下BEM吧.

BEM 规定

BEM是一种基于组件的Web开发方法，基本思想是将用户界面划分为独立的块。

接着我们对BEM来进行拆解:
B : 即block，这个block不是css中样式的block，而是模块的意思，将所有的样式类分成一些模块，有点类似于语义化的html，比如将样式列分为header，section，footer等.
E : Element，元素，比如说这个组件是按钮，即可将元素名起为btn.
M : modefiy，修饰器名。

命名约定的模式如下：

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

• .block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。
• .block--modifier 代表.block的不同状态或不同版本。

BEM 使用方法

我们应该知道"when and where"去使用BEM命名格式,而诀窍就是，你要明确是否存在关联性的模块.
如果只有一个简单的独立样式,那么使用BEM将毫无意义.
.btn { display: inline-block; color: blue; }

接下来我们以一个实例为例子来理解BEM是如何使用的:

在企业官网的设计中，没有人比苹果更懂得如何漂亮直观的在页面上展示宣传自己的产品.
就以其中的导航栏作为标准，可以清楚的看到，苹果在设计页面时也算是"煞费苦心",把页面划分为几个区块，并根据区块划分，其次使用 block-name_element-name--modefiy-name 命名,使得其更具有可读性.

下面这张图就更为清晰的展现了其至简至明的法则:

总结

当你真正上手写项目的时候，可能会认为这种方式过于繁琐，经常会在一个元素上应用大量的类，其实，我们可以应用它的思想，"取其精华,去其糟粕",把价值最大化,才是我们要学习和掌握的最好途径.

相关参考:BEM-(getbem.com/)