[CSS] BEM (Block Element Modifier) 방법론

Intro

CSS 방법론 중에는 BEM이라는 방법론이 존재합니다. 코드 양이 적다면 구조적으로 작성하지 않아도 큰 불편함이 없지만, 코드 양이 많아질수록 구조적으로 작성하는것이 중요합니다. 이때 CSS를 적용하기 위한 클래스명을 구조적으로 작성하는 방법론 중 하나인 BEM에 대해 알아보겠습니다.

 

아래의 사이트를 참고하여 작성했습니다.

 http://getbem.com/

BEM — Block Element Modifier

---

BEM (Block Element Modifier)

HTML에서 각 Element의 위치에 따라 Block / Element / Modifier로 구분하고, 이를 통해 각 Element에 고유한 classname을 부여합니다. 클래스 명은 block__element--modifier 형태로 부여합니다.

 

Ex)

<header class="screen-header">
  <h1 class="screen-header__title">Friends</h1>
  <div class="screen-header__icons">
    <i class="screen-header__icon screen-header__icon--small" />
  </div>
</header>

 

위와 같은 방법론을 적용하여 얻을 수 있는 이점은 다음과 같습니다.

• 모듈성 (Modularity): 블록 스타일이 다른 요소들로부터 종속적이지 않게 되기 때문에, 구조를 변경해도 문제가 생기지 않습니다. 또한 작업이 끝난 블록을 다른 프로젝트에 적용시킬 수 있습니다.
• 재사용성 (Reusability): 블록의 구조 전체가 아닌 클래스 이름을 통해 스타일을 부여할 수 있어 CSS 코드 양을 줄일 수 있고, 유지가 쉬워집니다.
• 구조 (Structure): CSS 코드 구조를 간단하고 쉽게 이해할 수 있도록 해줍니다.

---

BEM 구조

1. Block

자체적으로 의미 있는 독립적인 컴포넌트입니다. 따라서 블록만 분리해 재사용할 수 있습니다.

블록은 다른 블록의 내부로 들어갈 수 있지만, 그렇다고 독립적이지 않은게 되는것은 아닙니다.

 

이름은 영어 소문자, 숫자, 하이픈('-')로 구성됩니다. Ex) screen-header

2. Element

블록의 구성요소입니다. 블록과는 달리 독립적이지 않아서 블록에서 분리해 재사용할 수 없습니다.

블록 내부에 있는 태그라고 다 요소인게 아닙니다. 블록 내부에도 블록이 들어갈 수 있기 때문입니다.

 

이름은 다음과 같이 블록의 이름에 2개의 언더바('__')를 추가한 후 짓습니다. Ex) screen-header__icon

 

3. Modifier

블록이나 요소의 속성입니다. 외관이나 행동, 상태를 변경시킬 때 사용합니다.

다른 요소들과 남다른 요소가 있을 때, Modifier를 하나 주어 처리할 수 있습니다.

 

이름은 다음과 같이 블록의 이름에 2개의 하이픈('--')을 추가한 후 짓습니다. Ex) screen-header__icon--small