BEM : Block > Element > Modifier
BEM 은 css 를 관리한느 방법론 중으 ㅣ하나이다.
css 의 클래스명을 작성 할 때, 종속적 관계가 아닌 개별 Block 의 형태로 구성한다.
블럭요소 + __ 하위 엘리먼트 (그룹내 기능) + --엘리먼트 상태
에를 들어서, 이미지와 목록을 포함하고 있는 카드를 작성 할때,
<article class="card">
<div class="card__img">
<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">item3</li>
</ul>
<button class="card__button">see</button>
</article>
위와 같이, 컨테이너인 카드 안의 리스트와 버튼은 카드 그룹에 속하지만, 독립적인 class 명으로 정의하는 방식으로 만드는 방법론이다.
(실제로, 네이밍을 적용하고, 작성하는 것은 많은 경험이 필요할 것 같음)
결론은 BEM 은 관계를 유추 할 수 있는 명확한 클래스명을 사용하고, 서로 독립되어있도록 css 를 작성하는 것이 핵심이다.
