前端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>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页