聊一聊BEM設計模式在Vue元件開發中的應用

花生毛豆發表於2017-04-25
設計模式Vue元件

聊一聊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>

相關文章