2020年你還沒用BEM？

當你看到一個class的時候，你想得到什麼？

• 這個class用在什麼地方，作用是什麼？
• 是否在其他地方也有使用該class，修改會不會引起其他地方的樣式問題？
• class 是否在js中被使用？
• 等等等等

此時，你最想一眼看到這個class就解決以上所有的問題，那麼就引入了今天的主題 BEM—css命名規範

當你第一次看到css包含着-、__、–、- 這些亂七八糟的字符時，臉上笑嘻嘻，心裏***。當我第一次看到這樣的css的時候，我也沒法冷靜的看完，但是當你在工作中使用這些css命名規範的時候，不知不覺你會發現，這些符號帶來的優勢，要遠比多寫幾個字符要多的多

BEM介紹

• BEM，它代表 block ， element 和 modifier ，blcok可以理解成獨立的塊，在頁面中該塊的移動並不會影響到內部樣式（和組件的概念類似，獨立的一塊），element就是塊下面的元素，和塊有着藕斷絲連的關係，modifier是表示樣式大小等
• BEM是一種非常有用，功能強大且簡單的命名約定，它使您的前端代碼更易於閱讀和理解，易於使用，易於擴展，更健壯和明確，並且更加嚴格。
• BEM方法可確保參與網站開發的每個人都使用單一代碼庫，並且使用相同的語言。使用正確的命名將使您爲網站設計的更改做好準備。
• BEM可以用於js中，在JavaScript中並進行模板化，但是需要特殊的框架（暫不深入探索）

BEM的寫法

• block__element–modifier 或者 block__element_modifier（個人更傾向於第一種寫法）
• 單詞之間使用（-）分隔（file-name）
• 元素名稱通過雙下劃線（__）與塊名稱分隔(block__element)
• 修飾符名稱通過單個下劃線（–）與塊或元素名稱分隔，也可以使用_(block–modifier / element–modifier)

這部分是elementUI部分代碼寫法，使用的也是BEM寫法

<div class="el-row">
  <button class="el-button el-button--primary">主要按鈕</button>
  <button class="el-button el-button--success">成功按鈕</button>
  <div class="el-row__wrap>
    <p class="el-row__wrap--bar"></p> 
  </div> 
</div>

注：

• BEM方法中不存在元素的元素，即block-block
• 儘量不使用id選擇器
• 合理使用層級，層級最好不要超過4層，不便於閱讀，臃腫

錯誤的用法

<div class="header">
  <div class="header-scope">
    <div class="header-scope__logo">
      <img src="" class="header-scope__logo__img" />
    </div>
    <div class="header-scope__operate">
      <input type="text" class="header-scope__operate__input header-scope__operate__input--focus" />
    </div>
  </div>
</div>

修改後的用法

<div class="header">
  <div class="header-scope">
    <div class="logo">
      <img src="" class="logo__img" />
    </div>
    <div class="operate">
      <input type="text" class="operate__input operate__input--focus" />
    </div>
  </div>
</div>

利用sass可以很方便的簡寫BEM

.el{
  &-button{
    width: 100%;
    &--primary{
      color: blue;
    }
    &--success{
      color: green;
    }
  }
  &-row{
    font-size: 20px;
    &__wrap{
      color: red;
      &--bar{
        background-color: #ccc;
      }
    }
  }
}

轉換後

.el-button {
  width: 100%;
}
.el-button--primary {
  color: blue;
}
.el-button--success {
  color: green;
}
.el-row {
  font-size: 20px;
}
.el-row__wrap {
  color: red;
}
.el-row__wrap--bar {
  background-color: #ccc;
}

只使用BEM，還不能夠完全表達出class的所有含義，因此可以使用部分命名空間來增強class的表達

• .l-: 佈局(layouts)
• .o-: 對象(objects)
• .c-: 組件(components)
• .js: js的鉤子(JavaScript hooks)
• .is-|.has-: 狀態類(state classes)
• .t1|.s1: 排版大小(typography sizes)
• .u-: 實用類(utility classes)

關注我：前端Jsoning