BEM에 대해서

BEM이란 CSS의 이름을 짓는 방법론이다.

Block, Element, Modifier의 줄임말로 각각을 __나 --로 구분해서 표현한다.

 

1. Block

Block은 다른 것에 영향을 받지 않는 독립적인 컴포넌트다.

예를 들어 일반적인 header와 footer는 완전히 나눠져 있고

서로 영향을 받지 않도록 구성할 수 있어 Block이다.

 

BEM은 Block을 기준으로 CSS의 이름을 짓기 때문에 재사용이 용이하고

class 속성만 보더라도 어떤 것인지 쉽게 파악할 수 있게 해준다.

 

물론 Block 안에 독립적인 Block이 올 수도 있다.

 

그리하여 class 이름의 제일 앞에 Block 이름을 넣고

다음에 올 Element와 구분하기 위해 언더바 두 개를 넣어준다.

띄어 쓰기는 -로 표현한다.

block-name__element-name

 

2. Element

Element는 Block의 구성 요소들을 말한다.

Block과 구분하기 위해서는 Element가 단독으로 올 수 있는지, 재사용을 할만한 것인지를 생각하면 좋다.

예를 들어 검색을 위한 Block을 만들었고 Element로 글자 입력을 하는 input과 search button을 넣었다고 한다면

input과 button은 검색을 위한 기능에 특화돼 있고 따로 빼서 쓰기는 어렵다.

검색 Block과 함께 움직여야 의미가 있다.

로그인 화면도 마찬가지다.

 

Block에 Element가 없을 수도 있다.

Block이 단순한 button이라면 자식이 하나도 없을 수 있고

Block 안에 재사용 가능한 Block들이 연달아 나올 수도 있다.

 

Block이나 Element나 이름을 지을 때 그것이 무엇인지, 어떤 목적에서 쓰이는지가 나타나야 한다.

파란 버튼이라는 식의 생김새를 표현하면 안 된다.

 

3. Modifier

Modifier는 --를 앞에 붙여 쓴다.

(여기서는 Two Dashes 스타일을 따르는 것이고 다른 방식을 선택해도 된다.)

https://en.bem.info/methodology/naming-convention/

Block이나 Element 뒤에 붙일 수 있다.

Block과 Element의 상태나 모양 등을 정의한다.

 

Modifier를 포함한 클래스는 옵션이기 때문에 class에 단독으로 올 수 없다.

예를 들어 class 이름이 button인 Block이 있다고 할 때 button을 대체해서 button--red를 넣는 게 아니라

button button--red 이런 식으로 같이 넣어준다.

 

그래야 CSS 코드의 중복을 줄일 수 있다.

button에 공통된 코드를 넣고 button--red에는 이에 해당하는 코드만 넣는다.

 

<article class="card card--primary">
  <header class="card__header">
    <span class="card__title"></span>
  </header>
  <div class="card__body">
    <button class="button button--red"></button>
  </div>
</article>

 

Block과 Element가 섞인 경우

header Block 안에 search Block이 들어간 경우를 생각해보자.

일단 search Block의 class는 다음과 같이 해야 한다.

'search header__search'

search도 Block이기 때문에 어딘가에서 단독으로 쓰일 수 있다.

단독으로 쓰일 때 보여질 모양을 search에 정의하고

header의 엘리먼트로서 header 안에서의 위치를 정해주는 속성들을 header-search에 정의한다.

이렇게 해서 search Block을 단독으로도 쓸 수 있게 된다.

 

참고 : https://en.bem.info/methodology/quick-start/