css命名规范--BEM

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

element-ui,采用的就是BEM思想

.block{}
.block__element{}
.block--modifier{}

• .block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。
• .block–modifier代表.block的不同状态或不同版本。

之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.site-search{} /* 块 */  
.site-search__field{} /* 元素 */  
.site-search--full{} /* 修饰符 */

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>

参考一下element-ui 的button ，加深对BEM 的理解

“默认按钮”的class： “el-button–default”

“主要按钮”的class：”el-button–primary”

“成功按钮”的class：”el-button–success”

以上”–default，- -primay，–success，”代表button的不同状态

再看一下form

看一下这个form的DOM结构

<form class="el-form">
  <div class="el-form-item">
    <label class="el-form-item__label" style="width: 80px;">活动名称</label>
    <div class="el-form-item__content" style="margin-left: 80px;">
      <div class="el-input">
        <input type="text" autocomplete="off" class="el-input__inner">
      </div>
    </div>
  </div>
</form>

el-form，el-form-item 为block也就是BEM中的B

el-form-item__labe 和el-form-item__content为element也就是BEM中的E

同样的，el-input和el-input__inner又是新的一层结构

常见的class关键词：

• 布局类：header, footer, container, main, content, aside, page, section
• 包裹类：wrap, inner
• 区块类：region, block, box
• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
• 列表类：list, item, field
• 主次类：primary, secondary, sub, minor
• 大小类：s, m, l, xl, large, small
• 状态类：active, current, checked, hover, fail, success, warn, error, on, off
• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
• 星级类：rate, star
• 分割类：group, seperate, divider
• 等分类：full, half, third, quarter
• 表格类：table, tr, td, cell, row
• 图片类：img, thumbnail, original, album, gallery
• 语言类：cn, en
• 论坛类：forum, bbs, topic, post
• 方向类：up, down, left, right
• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…

简单规则：

• js操作的类统一加上js-前缀
• 不要超过四个class组合使用，如.a.b.c.d
• 状态类直接使用单词，参考上面的关键词，如.active, .checked
• 图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。

参考：

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

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