BEM : Block > Element > Modifier
BEM 은 css를 효율적으로 관리하는 방법론 중 하나이고, 이름 그대로 css 파일명을 블럭, 하위 엘리먼트 , 엘리먼트 상태의 순으로 작성하는 방법이다.
예를 들어, '카드'를 만들 때 아래처럼 작성한다.
<article class="card">
<div class="card__image">
<img src="">
</div>
<ul class="card__list">
<li class="card__list__item">item1</li>
<li class="card__list__item">item2 </li>
<li class="card__list__item card__list__item--acitve">item3</li>
</ul>
<button class="card__button">view</button>
</article>위와 같이, 컨테이너인 카드 안의 리스트와 버튼은 카드 그룹에 속하지만, 독립적인 class 명으로 정의하는 방식으로 만드는 방법론이다.
(실제로, 네이밍을 적용하고, 작성하는 것은 많은 경험이 필요할 것 같음)
결론은 BEM 은 관계를 유추 할 수 있는 명확한 클래스명을 사용하고, 서로 독립되어있도록 css 를 작성하는 것이 핵심이다.
