css 命名規範 BEM

mpccc發表於2018-03-01
CSS

在專案的開發過程當中, 我們往往因為日益複雜的css程式碼而感到力不從心. 如何合理的組織css程式碼成為了我們前端開發過程中必須考慮到的環節.

在讀element原始碼的時候, 瞭解到了BEM的命名風格.

使用 BEM 命名規範，理論上講，每行 css 程式碼都只有一個選擇器。
BEM代表 “塊（block）,元素（element）,修飾符（modifier）”,我們常用這三個實體開發元件。
在選擇器中，由以下三種符號來表示擴充套件的關係：

-   中劃線 ：僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連線記號。
--  雙中劃線線：用來描述一個塊或者塊的子元素的一種狀態
__  雙下劃線：雙下劃線用來連線塊和塊的子元素

type-block__element--modifier

塊(block)

一個塊是設計或佈局的一部分，它有具體且唯一地意義 ，要麼是語義上的要麼是視覺上的。

在大多數情況下，任何獨立的頁面元素（或複雜或簡單）都可以被視作一個塊。它的HTML容器會有一個唯一的CSS類名，也就是這個塊的名字。

針對塊的CSS類名會加一些字首（ ui-），這些字首在CSS中有類似 名稱空間 的作用。

一個塊的正式（實際上是半正式的）定義有下面三個基本原則：

CSS中只能使用類名（不能是ID）。
每一個塊名應該有一個名稱空間（字首）
每一條CSS規則必須屬於一個塊。

元素(element)

塊中的子元素是塊的子元素，並且子元素的子元素在 bem 裡也被認為是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱作為字首。

修飾符(modifier)

一個“修飾符”可以理解為一個塊的特定狀態，標識著它持有一個特定的屬性。

用一個例子來解釋最好不過了。一個表示按鈕的塊預設有三個大小：小，中，大。為了避免建立三個不同的塊，最好是在塊上加修飾符。這個修飾符應該有個名字（比如：size ）和值（ small，normal 或者 big ）。

element 的原始碼當中充分實現了這種命名方式, 在使用scss的情況下

/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace+`-`+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

相關文章