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;
            }
        }
    }