BEM - CSS

1. BEM이란?

Block-Element-Modifier의 구조로 class를 지정하는 것

선택자 특이성을 낮게 유지

직관적으로 CSS의 구조를 파악가능

 

2. 사용 방법

 (1). 기본형식

.block__element--modifier {}

 

 (2). element 다루기

<div class="box">
  <div class="box__description">
    <h2 class="box__name"></h2>
    <img class="box__img" src="" alt="" />
  </div>
</div>

*주의* box__description__img (x)  왜냐하면 block__element__element 는 허용되지 않기 때문 //

 

오직 하나의 element만 허용

 

 (3). modifier 다루기 

 

// 하위요소만 변형할 경우
<div class="action">
  <button class="action__order action__order--clicked">Order</button>
</div>

 

기존 class에서 변형자만 추가

 

//상위 요소를 기준으로 하위요소까지 동일한 방식으로 바꾸는 경우
<div class="action action--highlighted">
  <button class="action__order">Order</button>
  <button class="action__close">Close</button>
</div>

 

상위 요소 하나에만 추가하고 css 에서 중첩하여 사용

 

ex) .action--highlighted .action__order