BEM的命名規範

基本概念

CSS 的命名規範又叫作BEM規範，爲的是結束混亂的命名方式，達到一個語義化的CSS命名方式。
BEM是三個單詞的縮寫：Block（塊）表明更高級別的抽象或組件，Element（元素） Block的後代，以及Modifier（修飾） 不一樣狀態的修飾符。

命名方法：

.block__element--modifier {
        display: flex;
    }
    .block--modifier {
        display: flex;
    }
    .block__element {
        display: flex;
    }
    
    <p class="header">
        <p class="header__body">
            <button class="header__button--primary"></button>
            <button class="header__button--default"></button>
        </p>
    </p>

經過BEM的命名規範咱們能夠達到一個什麼目的呢？就是有一個清晰的描述，從上面的代碼中咱們能夠看到一層一層的清晰明瞭，並且有一個清晰的結構。

1 block

block 表明一個更高級別的抽象或者是一個組件，它僅僅做爲一個邊界。它主要的功能有下面三點：

負責描述功能的，不該該包含狀態。

/* correct */
    .header {
    
    }
    
    /* wrong */
    .header--select {
    
    }

不影響自身佈局，不包含具體的樣式，也就是block裏面不該該加樣式

/* correct */
    .header {
    
    }
    
    /* wrong */
    .header {
        margin-top: 50px;
    }

不能使用元素選擇器和ID選擇器

/* correct */
    .header {
    
    }
    
    /* wrong */
    .header a {
        margin-top: 50px;
    }

2 Element

是用一個雙下劃線隔開

/* correct */
  .header__body {
      margin-top: 50px;
  }
  
  /* wrong */
  .header .body {
      margin-top: 50px;
  }

表示的是目的，而不是狀態，以下例子：目的是在header下面定義三個區域 body、logo、title，可是並無指定任何狀態。

.header__body {
      margin-top: 50px;
  }
  
  .header__logo {
      margin-top: 50px;
  }
  
  .header__title {
      margin-top: 50px;
  }

不能脫離Block父級單獨使用

/* correct */
  <p class="header">
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>
  
  /* wrong */
  <p>
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>

3 Modifier

表示的是一個狀態，是用雙橫槓分開的。

.header__button--default {
      background: none;
  }
Boolean
  .header__button--select {
      background: none;
  }
枚舉
  .header__button--primary {
      background: #329FD9;
  }

不能單獨使用

/* correct */
  <p class="header">
      <p class="header__body">
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>
  
  /* wrong */
  <p>
      <p>
          <button class="header__button--primary"></button>
          <button class="header__button--default"></button>
      </p>
  </p>

BEM在預處理器語言中的使用

在Sass中的使用

.header {
        &__body {
            padding: 20px;
        }
    
        &__button {
            &--primary {
                background: #329FD9;
            }
            &--default {
                background: none;
            }
        }
    }

在Less中的使用

@classname: header;
    
    .@{classname} {
        .@{classname}__body {
            padding: 20px;
        }
    
        .@{classname}__button {
            .@{classname}__button--primary {
                background: #329FD9;
            }
    
            .@{classname}__button--default {
                background: none;
            }
        }
    }