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

转载于:https://my.oschina.net/u/4144971/blog/3070392