BEM

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

BEM 是CSS的一种命名规范。BEM 分别是 Block、Element、Modifier

Block

Block 在BEM中就属于一个模块，这个模块代表了页面中的一个独立的部分。
BEM 的规范是使用最简单的类名来代表一个Block，BEM 规定Block 类名只能使用字母、数
字、破折号。并且一个Block类名就代表一个Block，不使用用任何id 属性等其他一些乱七八糟的东西. 一个好的Block名可以为 .i18n-header .

Element

Element 跟Block 捆绑在一起.
Element 类名比 Block 类名多了可以使用下划线，还是双下划线。
在我们初学的使用会很自然的使用这样的CSS选择器来表示子类元素：.parent .children。但是在 BEM 中为了使用更简单的权重，BEM使用一个类名来表示：.parent\_\_children 。虽然写起来可能有点麻烦，但是你可以结合预处理语言，比如SCSS。同样Element也
不会结合其他类名、id、其他父级元素来给页面元素设置样式，就简单的写在 .[Block]__[Element] 这样的类名下。

Modifier

前面的 Block 和 Element 都可以想象成页面中的某些元素或者块。但是像一些元素的状态这些就不能用前面两个表示了。这些都归于 Modifier 管。
Modifier 不想 Element ，Modifier 跟Block Element 都没有层级关系。他只是一个状态
的表示。
Modifier 的命名就想 Element ，Modifier类名是在Block 或者 Element类名后面加--modifier. Modifier 比较特别，他可以结合Block 或者 Element来给DOM设置样式。比如：.Block--big .Block__Elemnt { }

Example

我们来看看BEM官方是怎么写样式的(styl)：

/* Block */
.navbar
  padding: 0 0 0 0

/* Modifier */
.navbar__item--title
  a
    &:hover
      color: white
  font-size: 18px

.navbar__menu
  font-size: 12px
  ul
    padding: 0
    li
      white-space: nowrap
      &.navbar__item--active
        background-color: rgba(22, 22, 22, .5)
        a
          color: $black
      a
        color: white
        &:hover
          text-decoration: underline

深入浅出

其实到这里你就已经知道BEM大概是个什么东西了。可以看官方文档，（前段时间毕业了我
明显的发现程序不看英文都是垃圾）。
为了能够学好他，我觉得还是下载官方源码学习学习。BEM 's github

通过看起代码发现了写东西：

不是每个样式都放在.className中，还是有很多写在tabName下的。
Block 和 Element 这样的类名一般都只会在选择器的开始，除了少数在Modifier和后面。也就是说不会出现这样的css ： table .Block {} 。
Modifier 相比之下很是随意。只要不结合不正确的Block 和 Element 就行。

BEM get

武汉的天气开始热了，我谈了个女票。武汉的妹子又白又长，可惜我谈的是广东的。

BEM

BEM