지난주에 BEM(Block Element Modifier)관련 자료를 찾던 중 좋은 내용이 있어서, BEM을 이해를 돕기위해 예시 중심으로 작성 해보려 한다.

기본 패턴

.block {
  /* ... */
}
.block__element {
  /* ... */
}
.block--modifier {
  /* ... */
}

.block은 높은 레벨의 추상이나 컴포넌트를 나타낸다.
.block__element은 ..block의 자식이 된다. 즉 .block의 일부이다.
.block__element–modifiler은 .block의 다른 상태나 버전이다.

하이픈(-)이나 언더스코어(_)를 두 개를 사용하는 이유는 블럭 이름을 하이픈을 사용할 수 있기 때문이다.
예를들면

.site-search {} /* block */
.site-search__filed {} /* Element */
.site-search--full {} /* modifier */

BEM의 포인트는 다른 개발자들에게 이름으로 이 마크업의 역할을 알려 준다는 것이다. HTML과 클래스들을 보면 연관성을 알게된다. 그리고 컴포넌트(Block), 컴포넌트의 자식 이거나 요소(Element)이고, 컴포넌트의 수정본을 나타내거나 수정본을 표현하는 수식어이다. 유추와 모델을 어떻게 연간되어있는지 추측 해보자.

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

최고 레벨 block은 사람이며, 이 block에는 손을 가진 element가 있다. 사람은 또한 여성이라는 수정본을 가졌다. 그리고 그 변화에는 hand라는 element가 있다.

.site-search를 사용하여 예제를 살펴보자.

<form class="site-search site-search--full">
  <input type="text" class="site-search__field">
  <input type="submit" class="site-search__submit">
</form>

우리는 .site-search라고 불리우는 block을 볼 수 있으며, 그 안는 .site-search__filed(or.site-search__submit)라고 부르는 element가 존재한다. 또한 .site-search의 수정본이라 부르는 .site-search--full이 존재한다.

다른 예제를 살펴보자

<div class="media">
  <img src="logo.png" class="media__img--prv">
  <div class="media__body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </div>
</div>

이제 .media가 block이라고 바로 알 수 있다. .media__img--prv는 수식어가 적용된 .media의 element을 가지고 있으며, .media__body는 수식어가 적용되지 않은 .media의 element이다. 이 모든것은 classes이름을 통하여 얻은 정보이며, 이것은 매우 유용하다.

결론

이번 내용은 BEM을 조금이라도 이해를 돕기위해서 작성되었으며, 아래 원문을 참조한다면 더 많은 정보를 얻을 수 있다.

참조

https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/