CSS命名规范之BEM

What is BEM？

BEM：Block（块） Element（元素） Modfier（修饰符），是由Yandex团队提出的一种前端命名方法论。根据这个规范，能够创建出可以复用的前端组件和前端代码。（BEM是一个高可用、强大的、简单易用的命名规范）

编程方法论中常见的一个就是面向对象编程（OOP），这种方法用在了许多的语言中。BEM和OOP类似的，是用代码和一系列模式来描述实际情况的方法，只考虑程序实体而无所谓使用什么编程语言。（摘自https://www.w3cplus.com/css/bem-definitions.html）

Why Choose BEM?

除了BEM规范以外还有其它的规范例如：

• OOCSS：用CSS“对象”分隔容器和内容
• SMACSS：风格指南为您的CSS编写CSS规则的五个类别
• SUITCSS：结构化类名和有意义的连字符
• 原子：将样式分解为原子或不可分割的部分

上面的方法都可以应用在项目中，无论使用哪一种方法，都将受益于更多结构化CSS和UI的优势。一些风格不那么严格和更灵活，而另一些则更容易理解和适应团队。

使用的原因：它比其他方法（即SMACSS）更容易混淆，但仍为我们提供了我们想要的良好体系结构（即OOCSS）以及可识别的术语。 （摘自https://www.jianshu.com/p/339fdb93e155）

Features

• 简单易用：只需要采用BEM命名规范就可以
• 单元性：独立的块和CSS选择器，可以使得你的代码可以重用和单元化
• 灵活性：使用BEM之后，方法和工具可以按照自己喜欢的方式进行配置（XML 、JSON）

按组件划分类名，减少层次关系，实现扁平化、语义化，通过唯一的类名来避免不必要的样式继承，提高渲染效率。

How To Use?

BEM命名规范参见BEM官网：http://getbem.com/naming/

部分摘自https://segmentfault.com/a/1190000012705634

Block

命名规范：block-name

示例：

.block{
   }
.container{
   }
.blog-header{
   }
/*上面都是block的命名方式，其中第三个是block名字有多个单词组成使用-隔开*/

Block是逻辑和功能相对独立的单元，类似于组件。每个block包含自己的行为（js）、结构（html模板）、表现（css）。block的独立性有利于代码的复用，有利于项目的管理。

（1）block名描述block功能，不能包含其状态，block可以嵌套、复用

• 描述功能就是描述这个block是干什么的？例如menu、carboard等等
• 不能包含其状态就是不能描述它的表现，例如一个button，那么不能描述它是什么样子red，blue

<!--正确的写法-->
<div class="error"></div>
<!--错误的写法，block包含了状态-->
<div class="red-text"></div>

嵌套的block