2020年你还没用BEM？

当你看到一个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