聊一聊BEM设想形式在Vue组件开辟中的运用

追念一下在你的前端生涯中是不是碰到过以下题目
1.在写css的时刻常常会在定名class时挖空心思
2.在团队多人开辟中涌现css定名争执
3.在举行组件化开辟时怎样范例誊写css

什么是BEM

BEM是Yandex团队提出的一种css的定名体式格局，经由过程这类定名体式格局能够很好地处理上面碰到的题目，进步css的开辟效力和可读性

进入BEM的天下

• B: 示意块，能够笼统成一个组件

• E: 示意元素，组件下的一个元素，多个元素构成一个组件

• M:示意修饰符，能够用来示意元素的状况，比方激活状况，色彩，大小

BEM这货终究张啥样呢，颜值高不高，请看下面的代码

    .block {}
    .block__element {}
    .block__element--modifier {}

看完后你的心田会不会在想,卧槽，这货竟然这么丑，名字还这么长，丑拒…

__和–衔接符这是什么鬼

• __重要用来示意块(B)和元素(E)间的衔接

• –用来示意块或许元素与状况的衔接

比方我们要做写一个button的组件，能够这么来

    
    /* 有一个叫button的组件 */
    .button {
         dispaly: inline-block;
         pading: 10px;
     } 

    /* btn组件下面有一个显现图标的元素 */
    .button__icont {
          font-size: 12px;
     }
    
    /* btn组件有很多色彩能够挑选  */
    .button--primary {
        background: blue;
    }

    .button--success {
        background: green;
     }

    .button--warning {
        background: red;
     }
    

    <div class="button button--primary">
        <span class="button__text">蓝色按钮</span>
    </div>

   <div class="button button--success">
        <span class="button__text">绿色按钮</span>
    </div>

   <div class="button button--warning">
        <span class="button__text">赤色按钮</span>
    </div>     

在Vue中连系Stylus预编译器运用BEM范例

<template>
  <div class="button" :class="[type ? 'button--primary' : '']">
    <i class="button__icon"></i>
    <span class="button__text"> {{ text }} </span>
  </div>
</template>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .button
    background: #dedede
    &__icon
      font-size: 12px
    &__text
      color: #fff
    &--primary
      background: blue;
    &--success
      background: green
</style>

<script type="text/ecmascript-6">
  export default {
    props: {
      type: {
            type: String
      },
      text: {
            type: String
       }
    },
    data () {
      return {}
    },
    components: {}
  }
</script>