BEM

如何写出工整、易维护的css代码

现在的问题

<div class="warp">

    <div class="production">

       <span class="img"></span>

    </div>

    <div class="description">

       <span class="text"></span>

    </div>

</div>

.warp{}

.production{}

.img{}

.description{}

.text{}

这样写的几个坏处

1. 没有层次

2. 很难维护

3. 不美观

什么是 BEM

block element modifier

/* Block component */
.btn {}

/* Element that depends upon the block */
/* 也就是组成block的元素 */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

把这些用在HTML里

<a class="btn btn--big btn--orange" href="http://css-tricks.com">
   <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

这些是不是BEM？

.nav .nav__listItem .btn--orange {
  background-color: green;
}

<a class="btn" href="http://css-tricks.com">
  <div class="nav__listItem">Item one</div>
  <div class="nav__listItem">Item two</div>
</a>

答案是：No！请看下面的解释

约定俗成

1. 一个样式名必须带有这个block的名字：

btn__price， btn__price--red 

1. 如果出现一个词无法形容该block：

# submit的button

submit-button__price, submit-button--yellow

submitButton__price, submitButton--yellow

抽象

# 从CSS角度看： 块和元素的CSS可以写成一种伪代码，然后根据命名约定编译成CSS

.btn {

  __price {

  }

  __text {

  }

   __label{

      __text{

       }

  }

}

# 那么编译这种伪代码的工具就是scss

SCSS

.btn {

  &__price {   # .btn__price

  }

  &__text {    # .btn__text

  }

  &__label{   #.btn__label

      &__text{ # .btn_label__text

       }

  }

}

注意事项

Never overriding modifiers in an unrelated block.

结构清晰，严格执行 element 和 modifier 与 block 的从属关系

Avoiding making unnecessary parent elements when the child can exist quite happily by itself.

block 嵌套的层次要尽量少（一个层次能搞完的就不要嵌套）

优缺点

优点：

1. 分层（结构）清楚
2. 易读
3. 易扩展

缺点：
由于BEM有很强的结构，重构页面时可能很费劲

注意

BEM规范虽然有很强的逻辑性，让人一下子能看到页面的结构，但是如果层次很深的话就会导致class的名字很长。

所以重用class样式（mixin等）+ BEM 就会让html有很好的逻辑且干净利落的结构

参考文档：

http://getbem.com/introduction/

https://en.bem.info/methodology/key-concepts/

http://www.w3cplus.com/css/bem-definitions.html