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