BEM：组织 CSS 样式的方法

组织 CSS 样式的方法挺多的，这些方法可以让你更好的去创建与管理 CSS 样式。这些方法都有自己的名字，BEM 就是一种组织 CSS 样式的方法。B（Block）E（Element）M（Modifier），区块__元素--修饰符。

比如你想为下面这块代码添加 CSS 样式：

 <ul>
   <li>item 1</li>
   <li>item 2</li>
 </ul>

CSS 样式看起来可能像这样：

ul {
  list-style: none;
}

ul li {
  margin-bottom: 16px;
}

在上面的样式里，我用了后代选择器（Descendant selectors），ul li 表示的是，找到所有的 li 标签，这个标签在 ul 标签里面。

如果用 BEM 的方式去创建这块样式，应该像这样：

.list {
  list-style: none;
}

.list__item {
  margin-bottom: 16px;
}

HTML 现在会变成这样：

 <ul class="list">
   <li class="list__item">item 1</li>
   <li class="list__item">item 2</li>
 </ul>

这块无序列表可以看成是一个区块（Block），我们可以给这个区块起个名字（list），区块里面的每个元素（Element）也会有个名字，区块名与元素名之间用两个下划线分开（list__item，list 是区块名，item 是区块里的元素名）。

M（Modifier）修饰符。比如有一种带边框的 list，这样就可以用一个修饰符：

.list--bordered {
    border: 1px solid #ccc;
}

然后这样用：

 <ul class="list list--bordered">
   <li class="list__item">item 1</li>
   <li class="list__item">item 2</li>
 </ul>

修饰符的前面用两条横线（--）分隔开。一个水平显示的列表，在列表元素的后面加个 inline（名字可以随便定义） 修饰符，像这样：

.list__item--inline {
  display: inline-block;
}

HTML：

 <ul class="list list--bordered">
   <li class="list__item list__item--inline">item 1</li>
   <li class="list__item list__item--inline">item 2</li>
 </ul>

上面是从 codecourse 学来的。