#BEM规范

BEM 是一种命名 CSS 样式的命名方法和规范，全称 Block（块）、 Element（元素）、 Modifier（修饰符） ，想必很多人都比较熟悉了。

• Block

  一般可以看做是独立具有实际意义的模块部分，例如 header,container,menu 等

• Element

  组成 Block 的一部分，没有具体的实际意义，一般也不独立使用，例如 menu item，list item，header title 等

• Modifier

  一般是块或者元素的修饰状态或者行为，例如 disabled，color，checked 等

BEM 的写法一般是.block-name__element-name--modifier-name，其中 Block 与 Element 之间连接是通过 __ 双下划线，Block，Element 与 Modifier 之间是通过 -- 双中划线进行连接，当使用less或者 sass 语法编写 css 时，通过嵌套语法也能够很简洁的书写这部分样式。

<div class="head">
  <div class="head__title">
    标题
    <div class="head__title--disabled">
      置灰内容
    </div>
  </div>
</div>

.head {
  background-color: #fff;
  &__title {
    font-size: 14px;
    color: #666;
    &--disabled: {
        color: #f00; 
    }
  }
}

BEM 命名规范可以让样式的命名更加模块化，组件之间结构独立，减少了命名之间的冲突，有着不错的易读性、维护性等等，但可能会让项目中的样式命特别的长。 下面也有一些使用 BEM 命名规范的网站，有兴趣的可以去看看：

• csswizardry.com

• mediatemple.net

• www.udemy.com

常用 CSS 样式名称

• 包裹类： 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