별다방 랜딩페이지를 만들면서 찾아본 BEM에 대해 적어보자
<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
<div class="btn primary"></div> -> <div class="btn btn--primary"></div>
<div class="btn success"></div> -> <div class="btn btn--success"></div>
<div class="btn error"></div> -> <div class="btn btn--error"></div>