BEM代码规范简单介绍

BEM是一个命名约定，让前端代码更容易阅读和理解，更容易协作，更加健壮和明确，而且更加严密。

B：Block（块）
E：Element（元素）
M：Modifier（修饰符）
是由Yandex团队提出的一种前端CSS命名方法论。

 

命名约定：

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

 

使用BEM命名，可以获得更多的描述和更清晰的结构，从其名字可以知道某个标记的含义。通过查看HTML代码中的class属性，就能知道元素之间的关联。

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>


// 在css预处理器中使用，如LESS、SASS等预处理器语言来编写CSS
<style lang='scss" secod>
.articke{
    &__body{
        background-color:#fff;
    }
    &__button{
        &--primary{background:#1890ff;}
        &--success{background:#ff4d4f;}
    }
}
</style>

 

 

使用插件

在項目中使用插件saladcss-bem    安裝依賴包

npm i sass sass-loader saladcss-bem -S

創建配置.postcssrc.js

module.exports = {
  plugins: [
    require("saladcss-bem")({
      defaultNamespace: "em", //空間命名
      separators: { //分離器
        descendent: "__", //派生符號
      },
      shortcuts: { //描述別名簡寫
        modifier: "m",
        descendent: "d",
        component: "c",
      },
    }),
  ],
};

html 中使用

<div class="home-page em-page">
    <h3>Home</h3>
    <div class="em-page__login">登录</div>
    <div class="em-page__section">内容部分</div>
    <div class="em-page__footer">
      <div class="em-page__footer--describe">底部描述</div>
      <div class="em-page__footer" :class="{'is-what':true}">what is this</div>
    </div>
  </div>

css 中使用

@c page {
  color: #555;
  @d login {
    color: red;
  }
  @d section {
    broder: 1px solid #999;
    color: #fff;
    padding: 10px;
    background-color: #4f4f4f;
  }
  @d footer {
    background-color: #fff;
    @m describe {
      font-size: 24px;
    }
    @when what {
      font-size: 36px;
    }
  }
}

编译后代码参考

.em-page {
  color: #555
}
.em-page__login {
    color: red
}
.em-page__section {
    broder: 1px solid #999;
    color: #fff;
    padding: 10px;
    background-color: #4f4f4f
}
.em-page__footer {
    background-color: #fff
}
.em-page__footer.is-what {
      font-size: 36px
}
.em-page__footer--describe {
      font-size: 24px
}