BEMの命名仕様

基本概念

CSSの命名規範はBEM規範とも呼ばれ、混乱を終わらせる命名方式であり、意味化されたCSS命名方式に達する.BEMは3つの単語の略語である:Block(ブロック)はより高いレベルの抽象またはコンポーネント、Element(要素)Blockの子孫、およびModifier(修飾)の異なる状態の修飾子を表す.
命名方法:

    .block__element--modifier {
        display: flex;
    }
    .block--modifier {
        display: flex;
    }
    .block__element {
        display: flex;
    }
    
    

        

            
            
        

    

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

ステータスではなく目的を表します.次の例では、ヘッダーの下に3つの領域body、logo、titleを定義することを目的としていますが、ステータスは指定されていません.

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

Blockの親から独立して使用できません

  /* correct */
  

      

          
          
      

  
  
  /* wrong */
  

      

          
          
      

  

3 Modifier

表示的是一个状态，是用双横杠分开的。

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

単独では使用できません

  /* correct */
  

      

          
          
      

  
  
  /* wrong */
  

      

          
          
      

  

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