BEM의 명명 사양

기본 개념
CSS의 명명 규범은 BEM규범이라고도 부른다. 혼란을 끝내기 위한 명명 방식이고 하나의 의미화된 CSS 명명 방식에 도달하기 위한 것이다.BEM은 세 단어의 줄임말이다. 블록(블록)은 더 높은 추상적이거나 구성 요소, Element(요소) 블록의 후손, 그리고 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;
  }

상태가 아니라 목적을 나타낸다. 다음과 같은 예는 헤더 아래에 세 개의 영역인 바디, 로고, 타이틀을 정의하는 것이지만 그 어떠한 상태도 지정하지 않았다.

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