当你看到一个class的时候，你想得到什么？

这个class用在什么地方，作用是什么？
是否在其他地方也有使用该class，修改会不会引起其他地方的样式问题？
class 是否在js中被使用？
等等等等

此时，你最想一眼看到这个class就解决以上所有的问题，那么就引入了今天的主题 BEM—css命名规范

当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时，脸上笑嘻嘻，心里***。当我第一次看到这样的css的时候，我也没法冷静的看完，但是当你在工作中使用这些css命名规范的时候，不知不觉你会发现，这些符号带来的优势，要远比多写几个字符要多的多

BEM介绍

BEM，它代表 block ， element 和 modifier ，blcok可以理解成独立的块，在页面中该块的移动并不会影响到内部样式（和组件的概念类似，独立的一块），element就是块下面的元素，和块有着藕断丝连的关系，modifier是表示样式大小等
BEM是一种非常有用，功能强大且简单的命名约定，它使您的前端代码更易于阅读和理解，易于使用，易于扩展，更健壮和明确，并且更加严格。
BEM方法可确保参与网站开发的每个人都使用单一代码库，并且使用相同的语言。使用正确的命名将使您为网站设计的更改做好准备。
BEM可以用于js中，在JavaScript中并进行模板化，但是需要特殊的框架（暂不深入探索）

BEM的写法

block__element–modifier 或者 block__element_modifier（个人更倾向于第一种写法）
单词之间使用（-）分隔（file-name）
元素名称通过双下划线（__）与块名称分隔(block__element)
修饰符名称通过单个下划线（–）与块或元素名称分隔，也可以使用_(block–modifier / element–modifier)

这部分是elementUI部分代码写法，使用的也是BEM写法

<div class="el-row">
  <button class="el-button el-button--primary">主要按钮</button>
  <button class="el-button el-button--success">成功按钮</button>
  <div class="el-row__wrap>
    <p class="el-row__wrap--bar"></p> 
  </div> 
</div>

注：

BEM方法中不存在元素的元素，即block-block
尽量不使用id选择器
合理使用层级，层级最好不要超过4层，不便于阅读，臃肿

错误的用法

<div class="header">
  <div class="header-scope">
    <div class="header-scope__logo">
      <img src="" class="header-scope__logo__img" />
    </div>
    <div class="header-scope__operate">
      <input type="text" class="header-scope__operate__input header-scope__operate__input--focus" />
    </div>
  </div>
</div>

修改后的用法

<div class="header">
  <div class="header-scope">
    <div class="logo">
      <img src="" class="logo__img" />
    </div>
    <div class="operate">
      <input type="text" class="operate__input operate__input--focus" />
    </div>
  </div>
</div>

利用sass可以很方便的简写BEM

.el{
  &-button{
    width: 100%;
    &--primary{
      color: blue;
    }
    &--success{
      color: green;
    }
  }
  &-row{
    font-size: 20px;
    &__wrap{
      color: red;
      &--bar{
        background-color: #ccc;
      }
    }
  }
}

转换后

.el-button {
  width: 100%;
}
.el-button--primary {
  color: blue;
}
.el-button--success {
  color: green;
}
.el-row {
  font-size: 20px;
}
.el-row__wrap {
  color: red;
}
.el-row__wrap--bar {
  background-color: #ccc;
}

只使用BEM，还不能够完全表达出class的所有含义，因此可以使用部分命名空间来增强class的表达

.l-: 布局(layouts)
.o-: 对象(objects)
.c-: 组件(components)
.js: js的钩子(JavaScript hooks)
.is-|.has-: 状态类(state classes)
.t1|.s1: 排版大小(typography sizes)
.u-: 实用类(utility classes)

关注我：前端Jsoning

前端Jsoning

发布了14 篇原创文章 · 获赞 5 · 访问量 1万+

私信关注

2020年你还没用BEM？