BEM (Blocks, Elements and Modifier)

block component

.btn {}

block 안에 속한 자식 block

.btn__price {}

block 자체의 스타일을 변경시키는 Modifier

.btn--orange {}
.btn--big {}

 

BEM을 사용하면

1. HTML 요소에 어떤 스타일들이 적용되었는지 쉽게 알 수 있다.
2. 클래스가 서로 어떤 관계를 가지는지 쉽게 알 수 있다.
   

   <div class="btn btn--orange btn--big">
     <span class="btn__price"></span>
   </div>