별다방 랜딩페이지를 만들면서 찾아본 BEM에 대해 적어보자

BEM(Block Element Modifier)

BEM이란

• HTML 클래스 속성의 작명법
  1. 요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
  2. 요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시

<div class="container">
     <div class="name"></div>
     <div class="item">
            <div class="name"></div>
      </div>
    </div>

class 선택할 때, .container .item > 이렇게 하는 경우, item의 자식요소인 name도 선택이 되는 경우가 있다

그래서 탄생된 작명법 : 요소__일부분 case

<div class="container">
     <div class="container__name"></div>
     <div class="item">
            <div class="item__name"></div>
      </div>
    </div>

그래서 탄생된 작명법 : 요소--상태 case

1. 일반 버튼 : <div class="btn primary"></div> -> <div class="btn btn--primary"></div>
2. 완료 버튼 : <div class="btn success"></div> -> <div class="btn btn--success"></div>
3. 삭제 버튼 : <div class="btn error"></div> -> <div class="btn btn--error"></div>