BEM(Block Element Modifier) - HTML 클래스 속성의 작명법

1. 요소__일부분 :  언더바 기호로 요소의 '일부분'임을 표시

// 미적용
<div class="container">
  <div class="name"></div>
  <div class="item">
    <div class="name"></div>
  </div>
</div>


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

 

2. 요소--상태 :  하이픈 기호로 요소의 '상태'를 표시

// 미적용
<div class="btn primary"></div>
<div class="btn success"></div>
<div class="btn error"></div>


// 적용
<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>
<div class="btn btn--error"></div>