高效的css命名約定

minghu發表於2018-12-27
CSS

css命名規範（推薦BEM思想，非常好的規範，是由Yandex團隊提出的一種前端命名方法論）

BEM由3部分組成：

  • B ——— block（塊）
  • E ——— element（元素）
  • M ——— modifier（修飾符）

命名約定的模式如下：

  <div class="block block--modifier">
      <div class="block__element"></div>
  </div>
複製程式碼
  .block {}
  .block--modifier {}
  .block__element {}
複製程式碼

這裡的 block 就相當於一個模組，可以看作是名稱空間，modifier 是 block 的修飾符（使用兩個中劃線連線）， element 是 block 下面的子元素（使用兩個下劃線連線）。

例1：下面的程式碼是定義了一個簡單的頭部導航，需求如下： 高亮顯示當前選單文字

  <header class="header">
    <nav class="nav">
      <a class="active" href="/" title="首頁">首頁</a>
      <a href="/product.html" title="產品中心">產品中心</a>
    </nav>
  </header>
複製程式碼
  .header .nav .active {
    color: blue;
  }
複製程式碼

如果按平時去寫，可能會這樣定義，這樣寫就有兩點不好：

  1. 如果在寫後面的程式碼的時候也用到了 active 這個類，那可能導致樣式覆蓋或者衝突
  2. 在定義樣式的時候多層巢狀會額外增加元素查詢的效能開銷，雖然多層巢狀無法避免，但是能少則少

如果按照 BEM 規範去命名，則是這樣：

  <header class="header">
    <nav class="header__nav">
      <a class="header__nav__a--active" href="/" title="首頁">首頁</a>
      <a href="/product.html" title="產品中心">產品中心</a>
    </nav>
  </header>
複製程式碼
  .header__nav__a--active {
    color: blue;
  }
複製程式碼

這樣一來不僅成功避免了上面的兩個問題，另一方面也增加了程式碼的可讀性，讓所以元素之間的關係變得更加緊密，如果別人熟悉 BEM 規範，那麼就能很輕易的知道這段程式碼是什麼意思，在團隊協作中也能提高開發效率。

例2：利用這個規範我們也可以定義自己css公共樣式:

  // 公共按鈕樣式
  .btn { ... } 
  .btn--lg { ... }
  .btn--sm { ... }
  .btn--xs { ... }
  .btn--round { ... }
  .btn--disabled { ... }
  .btn--primary { ... }
  .btn--success { ... }
  .btn--warning { ... }
  
  // 如果某個模組下的按鈕和上面的通用按鈕樣式不一樣，則可以繼續增加樣式定義
  // 分享按鈕樣式
  .share-btn { ... }
  .share-btn--lg { ... }
  .share-btn--sm { ... }
  .share-btn--xs { ... }
  
  // 公共標題樣式
  .tit { ... }
  .tit--h1 { ... }  // 一級標題
  .tit--h2 { ... }  // 二級標題
  .tit--h3 { ... }  // 三級標題
  
  // 全域性主題樣式
  .global-theme--white { ... }
  .global-theme--black { ... }
  .global-theme--christ { ... }
  
  // ...
複製程式碼

這樣的命名方式不僅看起來清爽，而且實用，方便維護。

當然也並不是所有的樣式都適合用這種方式命名

比如：

  1. 樣式重置(reset.css)
  2. 全域性通用的的樣式，比如：
  .center { text-align: center; }
  .right { float: right; }
  .left { float: left; }
  
  // ...
複製程式碼

這一類樣式並不屬於某一個模組，也沒有需要修飾的地方，就是單純的面向屬性的命名。 所以在專案中還需要結合真實場景，相互結合使用。

BEM 規範可以說一種高效、強大的命名約定，雖然看起來會很長，但是壓縮之後的程式碼的體積會小很多，同時也可以儘量精簡css的命名來優化。

相關文章