BEM命名规范入门及经常使用CSS class 命名

为何须要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

结语

BEM 不是必须的，你依然能够选择本身喜欢的方式编写，组织你的 CSS 代码。使用 BEM 主要目的是为了在团队开发中有一个统一的规范，更利于代码的维护，在别人接手你的代码，或者接手别的代码时可以更加快速的理解代码。

参考

Get BEM

BEM

BEM思想之完全弄清BEM语法

什么鬼，又不知道怎么命名class了