什么是 BEM 呢, 是 block element modifer 的缩写吧. BEM 代表块 (Block), 元素(Element), 修饰符(Modifier) 著作权归作者所有. 编程方法论中一个最常见的例子就是面向对象编程(OOP). 这一编程范例出现在许多语言中. 在某种程度上, BEM 和 OOP 是相似的. 它是一种用代码和一系列模式来描述现实情况的方法, 它只考虑程序实体而无所谓使用什么编程语言. 著作权归作者所有. BEM 是为了模块化 CSS 的一种规范, BEM 是一种方法论. 创始人是来自欧洲的 Yandex.BEM 的目标就是开发有效的有组织的 CSS 代码.
block 代表了更高级别的抽象或组件.
.block__element 代表. block 的后代, 用于形成一个完整的. block 的整体.
block--modifier 代表. block 的不同状态或不同版本.
我们为什么用 BEM, 可以模块化 CSS , 这样我们就避免了瀑布的影响, 同时这些模块化后的代码块在项目间复用. 有了复用也就是减少了 CSS 的代码量, 代码量下了也就好维护. 还有就是结构化, 结构化的好处也就是容易扩展.
我们来分析一个简单的网页, 这就是 GitHub 的首页, 这里我们之前学习的知识来分析和规划网页的样式. 我们用颜色区分不同功能.
块名称需要是唯一的. 块名称的级别类似我们语言的类级别.
元素名称相对于块内, 也就是块内是唯一的. 还有就是整个设计中切记不要用 id 来作为标识来定义样式.
下面命名规则, 双下划线表示元素, 两个中划线表示修饰符. 这个只是一种约定俗成的, 使用习惯你也可以根据自己来定义自己的规范.
来源: http://www.jianshu.com/p/72522cc7ca5c