BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。
我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。
命名约定的格式如下：
.block{...}/* 代表更高级别的抽象或组件 */.block__element{...}/* 代表.block的后代，用于形成一个完整的block整体 */.block--modifier{...}/* 代表block的不同状态或不同版本 */
之所以使用两个连字符和下划线而不是一个，是为了让自己定义的块可以用单个连字符来界定，如：
.myHeader-search{...}/* 自定义的某个块 */.myHeader-search__textElement{...}/* 自定义块中的textElement元素 */.myHeader-search--full{...}/* 自定义块中的full修饰符 */
BEM的关键在于，光凭名字就可以告诉其他开发者某个标记(class)是用来干什么的。通过直观地阅读class属性，我们就能明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者元素，还有一些是组件其他形态或者是修饰符。我们通过下面的示例来进一步说明：
上面的代码使用了常规CSS来表示，各个class都是有意义的，但是他们之间却是脱节的，拿female来说，是指女性人类还是指某种雌性的动物？hand是在表示指针（英文hand有钟表指针的含义）还是一只正在玩指纸牌的手呢？使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下：
再看一个常规方式命名的例子：
上面的命名不好的地方就在于名称不够精确，不能告诉我们足够的信息。尽管我们可以用它们完成工作，但它们确实非常含糊不清，不够优雅。使用BEM记号法后就是下面的代码：
在上面的代码中，我们可以清晰地看到有个叫.site-search的块，内部有个叫做.site-search__field的元素，并且site-search还有另一种形态叫做.site-search–full
通常人们会认为BEM这种写法难看。但是，如果仅仅认为这种写法看上去不怎么好看而羞于使用，那么我们将错失最重要的东西。
BEM看上去有些怪怪的，但是它的好处远远超过外观上的瑕疵
BEM有可能导致输入更长的文本，但是大部分编辑器都有代码自动补全的功能，而且gzip压缩将会让我们消除对文件体积的担忧
BEM命名规则：http://segmentfault.com/a/1190000000391762
class命名方案：http://www.w3cplus.com/css/css-class-name.html
常用的CSS命名规范：http://www.html5cn.org/article-7600-1.html
通用CSS笔记、建议与指导：https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
CSS代码重构和优化之路：http://luopq.com/2016/01/05/css-optimize/
CSS进阶：http://caibaojian.com/toutiao/6098
老九学堂出品，转载请私信哦
对于文章内容有不理解的可以添加老九君个人QQ：614940318，请备注来自简书
老九学堂免费C、C++、Java课程地址：
https://study.163.com/courses-search?keyword=%E8%80%81%E4%B9%9D%E5%AD%A6%E5%A0%82
