阅读 992

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了

关注下面的标签,发现更多相似文章
评论