樣式命名有多難?淺談BEM命名規範⚡

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰css

前言✍️

最近在搭本身的組件庫，關於CSS預處理器用的是SCSS。
對於樣式的命名使用了BEM，藉此機會分享一下。

怎麼命名🔥

樣式命名有多難

我之前以爲這是一個特別特別難的問題，這難的有恐怖呢，這就像產品讓我作一個頁面但沒有設計圖甚至原型圖只是幾個框框的狀況下讓我作的特別好看，色彩特別鮮豔同樣，真是有（tian）點（da）困（lei）難（pi）🤏。
你們有沒有遇到一種狀況就是再寫一個模塊的時候它的內容給他樣式命名container，那他的左邊內容呢？右邊內容呢？left-container?right-container?若是內容裏面還有內容呢，原諒我英語很差，我仍是會想用container，要瘋🤷‍♂️。
class既要表達清楚這個樣式表明什麼又要不能有重複，樣式重複的後果你們懂的都懂，因此我才說這對大部分前端來講是挺難的一個問題，但對一小部分前端程序員來講根本不值一提，爲何這麼說呢？由於我碰見過名字按順序one，two和three來排列的class名，我想這可能對他們來講不算什麼事吧🤦‍♂️。
開個玩笑，在正常狀況下，咱們對樣式進行命名的時候都會去查對應模塊的英文來進行命名（英文好的當我沒說），起一個獨一無二的名字。
但事實上咱們不能保證咱們"當時認爲獨一無二的名字"就是"獨一無二的"，當咱們給一個tab加動態時可能會用到actived來表明被激活 被選中，用了這個以後本能的其餘的模塊動態仍是會想用這個名字actived，若是有同感的能夠留個讚了，說明咱們是一類人哈哈哈😵。
有的同窗可能會說，哎呀能跑就行不衝突就行反正客戶又不會看你源碼管你寫的好很差看，但試想一下若是這個項目不是你一我的開發呢，當涉及到更大、更復雜的項目時，你如何組織代碼是提升效率的關鍵！若是你提桶了以後輪到別人接手呢？別人看着你的代碼就會跟別人抱怨："看！這人寫的什麼屎山！" 是否是你曾經也這樣吐槽過別人呢🙇。

關於BEM🌊

BEM是什麼

BEM — Block Element Modifier 是一種幫助您在前端開發中建立可重用組件和代碼共享的方法，由 Yandex 團隊提出的一種前端 CSS 命名方法論。
所謂BEM說白了就是把樣式按照B E M三種來進行命名。

BEM:前端
- B - Block 一個獨立的模塊，一個自己就有意義的獨立實體好比：header、menu、container
- E - Element 元素,塊的一部分可是自身沒有獨立的含義好比：header title、container input
- M - Modifier 修飾符，塊或者元素的一些狀態或者屬性標誌好比：small、checked

BEM使用

知道了BEM的基本概念後接下來就是使用了，上面我也說了，說白了BEM也就是把三個鏈接在一塊兒組成一個class名,那怎麼鏈接他們三呢？
BEM提出的一個概念是用鏈接符號來表達,它並不規定必須用什麼鏈接符,但規定用不一樣鏈接符作團隊內約定區分BEM 3類元素。
B其實能夠理解成一個模塊，就好比Element的el-button、Ant Design的ant-btn。
E的鏈接用官方的方式就是塊名稱加兩個下劃線加元素名稱構成（ __ ）就好比Element的el-radio__input。
M的鏈接用官方的方式就是.block__elem--mod，就好比Element的el-button--small、vant的van-button--danger。

BEM的好處

能夠發現不少開源優秀的組件庫都是用的BEM規範來命名，那爲何會這麼受歡迎呢？
要知道咱們用一個技術或者框架或者規範目的都是隻有一個，讓本身更舒服，就好像編輯器裝插件，不用原生js開發而用框架開發一個道理。
方便查看 BEM可讓開發人員在樣式命名上就知道這個樣式屬於哪裏，從名字就能夠知道某個標記的含義，假設一個樣式命名left-content,光是找這個樣式在哪裏就已經很麻煩了。
結構明瞭在咱們用scss和less預處理器的時候都習慣嵌套不少層，但有了BEM命名後模塊層級關係簡單清晰，並且css書寫上也沒必要做過多的層級選擇。
可複用性 在寫了一個元素的樣式後須要對他的修飾符進行拼接樣式修改，咱們在scss中可使用@mixin作些處理拼接E和M放到公共的scss中別的地方再進行復用,就好比element的mixins配置。

示例

說了這麼多光看文字也煩了吧，仍是放個簡單的代碼示例出來你們品吧,下面是一個按鈕的組件封裝。git

<template>
  <button
    class="zl-button"
    :class="[
      type ? 'zl-button--' + type : '',
      size ? 'zl-button--' + size : ''
    ]"
    type="button"
  >
    <slot />
  </button>
</template>
<script>
export default {
  name: 'ZlButton',
  props: {
    type: {
      validator (value) {
          return oneOf(value, ['default', 'primary', 'info', 'success', 'warning', 'danger']);
      },
      type: String,
      default: 'default'
    },
    size:{
      validator (value) {
          return oneOf(value, ['','medium', 'small', 'mini']);
      },
      type: String,
      default: ''
    }
  }
};
</script>
複製代碼

zl-button能夠看到這裏用了B的鏈接。
zl-button--small能夠看到這裏用了B+M中間用--鏈接起來來表明塊和修飾符鏈接。

寫在最後👋

對於樣式的規範其實也沒有那麼難，只是平時爲了追求速度而放棄了規範，實際上若是時間容許的話仍是用主流的規範來約束本身不讓本身的代碼變成別人口中的屎山。
若是您以爲這篇文章有幫助到您的的話不妨🍉關注+點贊+收藏+評論+轉發🍉支持一下喲~~😛

參考👈

如何看待 CSS 中 BEM 的命名方式？程序員

GET BEMgithub

往期精彩🌅

如何優雅的使用Vuepress編寫組件示例（上）👈markdown

如何優雅的使用Vuepress編寫組件示例（下）👈框架

手牽手🧑‍🤝‍🧑學習Gulp不用愁less

爲了方便，我改了別人的輪子😅編輯器