为什么需要 BEM
如果编写项目的 CSS 代码只有你一个人，或者项目的 CSS 代码量很小，你可以用你喜欢，习惯的方式去组织你的 CSS 代码。但是项目更大，更复杂，有多人编写项目的 CSS 代码（每个人有自己的风格），代码量大的时候，就需要一种统一形式去组织 CSS 代码，这时候 BEM 就派上用场了。
什么是 BEM
BEM(Block Element Modifier) 是一种命名 CSS class 的模式，使用这种模式可以让 CSS 代码更加利于维护。标准的 BEM 写法是 .block-name__element-name--modifier-name。
Block
页面上逻辑和功能独立的，可复用的组件，可以嵌套并相互交互，但在语义上它们保持平等，可以存在页面上不同的位置或不同项目中，保持样式不变。
可以使用字母，数字，连字符进行命名，任何 html 元素都可以成为一个 block，不依赖于页面上的其他 block 或者 element。
<header class="header"></header>
复制代码.header {
color: #333;
background: #f5f5f5;
}
复制代码Element
组成块的一部分，内部的任何元素都与块有关联，不能在块的外部使用。
<article class="article">
<h2 class="article__title"></h2>
<p class="article__content"></p>
</article>
复制代码.article {
padding: 12px;
}
.article__title {
font-size: 1rem;
}
.article__content {
font-size: .9rem;
}
复制代码Modifier
用来表示块或者元素的状态，外观或者行为，不必须，可以选择使用。
<button class="btn btn--disabled"></button>
复制代码.btn {
color: #333;
background-color: #fff;
}
.btn--disabled {
color: #fff;
background-color: #6c757d;
}
复制代码示例
这样的卡片是一个单独的块
<div class="list-card">
<img class="list-card__img" />
<div class="list-card__content">
<a class="list-card__link"></a>
<p class="list-card__desc"></p>
<div class="list-card__stats">
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__stat"><i class="list-card__icon"></i></span>
<span class="list-card__date"></span>
</div>
</div>
</div>
复制代码See the Pen BEM Demo by 轻键快码 (@xrr2016) on CodePen.
常用 CSS class 名
包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block
状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading
尺寸类： large, middle, small, bigger, smaller
组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog
位置类： first, last, current, prev, next, forward, back
文本类： title, desc, content, date, author, category，label，tag
人物类： avatar, name, age, post, intro
参考
贡献者
jiechen