談談BEM規範（含程式碼）

Mjser發表於2021-10-27

css規範之BEM規範

前言

引用一句經典名言在程式設計的世界裡其中一件最難的事情就是命名，不管是設計到程式語言還是標記語言都會有命名的需求。今天聊的就是關於css的命名規範的發展過程以及演變。

命名的發展變化過程

  • 非元件化專案css命名原則
    • 複用性 全域性性
    • 以jquery為代表的時代，我們專案都是獨立的html檔案，此時為了讓我們的專案更好的維護，在寫樣式的時候，通常我們會將一些通用的樣式單獨提取到一個css檔案，每個頁面使用的時候可以引入使用，比如reset.css,common.css。
    • 每一塊功能塊的樣式都是獨立的，之間無法複用，可以複用的樣式全部提取到全域性樣式。
  • 元件化專案命名原則
    • BEM規範
    • 以vue和react為代表的時代，我們專案都是元件化的，元件內的樣式都是獨立的作用域scope來限制，元件之間是可以相互引入使用的，一個元件可以拆分成多個小元件，此時樣式命名規範就需要使用BEM規範，從而達到元件樣式的獨立性。

BEM的規範

  • BEM規範是css命名規範，主要適用的範圍是元件化開發的模式。
  • 規範介紹（B__E--M）
    • B 代表block,也就是塊，每一個塊都是一個獨立的功能，塊之間可以相互巢狀。
      • 塊的命名可以由多個單片語成，每個單詞之間以-連結
      • 塊的作用只是起到一個隔離的作用，一般不會在塊裡面實現具體元件的樣式，對於塊修飾樣式比如尺寸，位置可以通過修飾符設定
      • 塊與修飾符之間通過--連結
    • E 代表element,也就是元素，元素是依賴於塊存在，不能獨立存在，必須巢狀在塊內部。
      • 元素的命名可以由多個單片語成，每個單詞之間以-連結
      • 元素的樣式必須依賴塊存在，元素是塊的具體實現,塊與元素之間通過__連結
      • 元素裡面可以定義每個元素自身的樣式，對於元素修飾樣式比如尺寸，狀態可以通過修飾符設定
      • 元素與修飾符之間通過--連結
    • M 代表modifier, 也就是修飾符，修飾符一般是對於元素或者塊的狀態和外觀進行修飾。
      • 修飾符的命名可以由多個單片語成，每個單詞之間以-連結
      • 修飾符可以修飾塊和元素的狀態、行為、尺寸等
  • 程式碼演示 
        <div class="qf-rate">
        <span class="qf-rate__item qf-rate__item--active">
        </span>
        <span class="qf-rate__item">
        </span>
        <span class="qf-rate__item">
        </span>
        <span class="qf-rate__item">
        </span>
        <span class="qf-rate__item">
        </span>
    </div>

        .qf-rate{
        width: 300px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .qf-rate__item{
        width: 48px;
        height: 48px;
        cursor: pointer;
        background: url('./img/star.png');
    }
    .qf-rate__item--active{
        background: url('./img/star_active.png');
    }
  • BEM不推薦寫法
    1. 採用標籤或者id作為選擇器，全部採用類名作為選擇器
      • id因為權重的問題，而且針對於spa的專案會出現id的重複情況
      • 標籤選擇器當我們需要修改元件解構的時候，同時還需要維護元件樣式
    2. 不推薦使用並列選擇器，使用修飾符來實現
    3. 不推薦使用偽類選擇器，使用修飾符來實現
      • 此處一般通過js控制狀態，新增修飾類
    4. 不推薦使用全域性的css樣式比如rest.css common.css
      • 但是針對於一些格式化的樣式還是可以使用，一切目的都是為了方便維護

總結

BEM規範只是前端元件化發展過程中的規範，都是為了元件化服務，並不是唯一的規範，是否採用這個規範目的是為了團隊協作和更好的維護迭代，不是為了規範而規範。

相關文章