BEM

본 글은 글쓴이가 꺼내보기 위함의 목적이 큰 글입니다 :)

정의

Block Element Modifier 로 구성하여 클래스 이름짓는 방법론.

장점

1. class명만으로도 구조와 기능을 한번에 파악하기 쉬움.
2. scss와 더불어 사용했을 경우 좀 더 깔끔하게 관리 가능함.

특징

1. __ , — 로 구분 짓는다.
2. id사용 X
3. 목적에 따라 이름 지음.

Block

조건

1. 재사용 가능
2. 기능이 독립적 → 어디든 배치해도 자유롭게 사용 가능.

특징

1. 색상, 크기등으로 묘사 X
2. position, margin 등의 위치값 X → 재사용을 위해
3. block안에 block사용 가능.

Element

조건

1. Block 안에 종속 = Block 밖에서는 기능을 못함.
2. __ 사용 ⇒ .block명__element명** 식으로 명명.

특징

1. Element 안에 Element가 속할 수 있음.

Modifier

조건

1. block 또는 element 의 속성으로 명명
2. — 사용
   • .block명—modifier명
   • .block명__element명—modifier명

특징

1. boolean type (값이 true라고 가정)

   • ex) — focused , —disabled, —error, —selected ...

2. key-value type = 성질-내용

• ex) —theme-normal , —color-grey

사용예시

<div class="search header__search"> // block 이자 element, .header__search에서 
  <form>
    <div class="search__inner"> // block 'search'의 element
      <div class="search__title"> // element 안에 element, 서로 종속 관계 아님.
        <label for="main-search">
          <i class="fa fa-search"></i> //fa-search : block 'fa'의 modifier 'search'
          <span class="blind">Search</span>
        </label>
      </div>
      <input type="text" id="main-search" class="search__input"/> <!--focus시 .search__input--extend 클래스를
      추가합니다--> //.search__input--extend : element 'search__input'의 modifier 'extend'
      <input type="submit" class="search__button" value="Search"/>
    </div>
  </form>
</div>

scss

& : 부모참조자, &대신 부모가 붙게됨.

.header {
  width: 100%;
  background-color: #eaeff2;
  
  &__inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    min-width: 800px;
    height: 120px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  &__logo {
    margin-bottom: 30px;
  }
  
  &__auth {
    position: absolute;
    top: 20px;
    right: 180px;

    &--opened {
      .auth-means {
        border-radius: 8px 8px 0 0;
      }
      .auth-picker {
        display: block;
      }
    }
  }
  
  &__search {
    position: absolute;
    top: 60px;
    right: 0;
    
    .search__input {
      width: 60px;
    
      &[class$=--extend] {
        width: 160px;
      }
    }
  }
}

참고문헌

[CSS 방법론] BEM 방식

https://velog.io/@ylem76/BEM

CSS 방법론 - BEM