了解CSS BEM方法论

什么是BEM？

BEM是Block、Element 和 Modifier的简写。

BEM不是一门语言，而是一种书写CSS Class的方法论。

BEM会让你的CSS书写的更简洁、可维护性更好。

B - Block（块）：

类似一个组件，例如网页顶部的（导航 - Navigator），那么在BEM方法中我们就可以用.navigator来定义这个块（一般为这个组件的根）。

.navigator {

}

* 注意使用的是Class，而不是元素名。

E - Element（元素）：

元素是块的的子节点，例如在（导航 - Navigator）中会有一些列表（ul, li）。

BEM方法定义的元素Class的写法是：块Class__元素Class（双下划线__）

.navigator__list {

}

M - Modifier（修饰符）：

如果我么想改变某个（块- Block）或（元素- Element）的样式，就用到了BEM方法中的修饰符（块和元素都可以有修饰符）。

修饰符Class的写法是：块Class__元素Class--modifier 或块Class--modifier（双破折号--）。

.navigator__list-item {

}

.navigator__list-item-last {

}

HTML结构：

BEM的内容基本就这些，如果想更深入的了解如何在SASS中应用BEM方法，请看W3CTube专栏：#CSS BEM 方法论#，共6讲：

CSS BEM 方法论 – BEM 如何帮助到你？ (1/6)

CSS BEM 方法论 – 块和元素 (2/6)

CSS BEM 方法论 – 修饰 (3/6)

CSS BEM 方法论 – 使用 Sass 书写 (4/6)

CSS BEM 方法论 – 使用 Mixins 改善 (5/6)

CSS BEM 方法论 – Sass 语法的可读性 (6/6)

观看网址：http://w3ctube.com/series/css-bem/