前端css样式 BEM 规则书写规范

前端经理让总结css书写规范，用于公司前端css样式培训用，大概总结了一些。

BEM 是块（block），元素（element），修饰符（modifier）简写，是一套前端css命名方法论。
规范默认有一下几个约定：

• -中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
• __ 双下划线：双下划线用来连接块和块的子元素
• _ 单下划线：单下划线用来描述一个块的子元素的一种状态（也可使用–表示）

优点

让前端代码更容易阅读和理解，更加的语义化，更容易协作，更容易控制，更加健壮和明确，而且更加严密。

缺点

命名方式长且难看，书写不雅（使用less/sass解决）

Block:
一、block可以嵌套，可以重复。
二、不影响自身布局，不能设置margin或者padding。
三、不能再BEM中使用元素选择器和id选择器。
四、用于描述目的，例如menu,button等

Element:
一、element表示其目的(item,text)，而不是状态（big,red）
二、Element 可以任意嵌套，并且嵌套任意数量。
三、Element只能作为block的一部分。所以类似于block__item1__item2是不合规矩的

Modifiter:
一、修饰符不能单独使用
二、表示其大小，主题，禁用，状态，行为等。
三、与块元素的连接符为 –

<template>
  <!-- 块 -->
  <div class='box'>
    <!-- 块 修饰符 -->
    <div class="box-header box-header--bgColor">
      <!-- 元素 -->
      <div class="box-header__element" v-for="(item,index) in list" :key="index">
        <!-- 元素  修饰符 -->
        <span class="box-header__title box-header__text_color">{{item}}</span>
      </div>
    </div>
    <!-- 块 -->
    <div class="box-cont">
      <!-- 元素 修饰符 -->
      <div class="box-cont__element box-cont__element_active" v-for="(item,index) in list" :key="index">
        <span>{{item}}</span>
      </div>
      <!-- 元素 修饰符 -->
      <div class="box-cont__element box-cont__element_active box-cont__element_size" v-for="(item,index) in list" :key="index">
        <!-- 元素 -->
        <span class="box-cont__text">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">

.box{
  &-header{}
  &-header--bgColor{}
  &-cont{}
}
.box-header{
  &__element{}
  &__title{}
  &__text_color{}
}
.box-cont{
  &__element{}
  &__element_active{}
  &__element_size{}
}
</style>