BEM을 이용한 class 네이밍 컨벤션

BEM이란?

Block Element Modifier으로 css에서 많이 쓰이는 방법론이다.

기본 규칙

• 영어 소문자로 작성한다.
• 일반 단어의 경우에는 - 으로 연결한다. (my-menu)
• element의 경우에는 blcok 뒤에 __ (double underscore)으로 연결한다. (__item)
• modifier의 경우에는 element 뒤에 _ 으로 연결한다. (_visible)
• 네이밍의 조합은 형태-의미-순서-상태 순으로 사용한다. (예시 button-submit-03-disable)
• 언더스코어는 파일, 폴더, 이미지 등에만 사용한다.(image_elysia_asset_01.png)
• 숫자를 사용할 때는 01, 02, 03… 혹은 001, 002, 003처럼 사용한다. 앞에 0을 붙이지 않으면, 이미지 정렬 시 1 다음에 2가 오지 않고 10이 오는 등, 정렬 순서가 엉망이 될 수 있기 때문이다.

1) Block

여기서 Block은 문단 전체에 적용되는 요소, 혹은 그 요소를 담고 있는 큰 덩어리이다.

이 Block들은 클래스의 컴포넌트를 형성하고, 항상 맨 앞에 위치한다. 여기서 이 클래스의 이름을 정의할 때는, 해당 Block의 목적을 기술해야 하며, 이 Block 자체의 형태 등을 고려하지는 않는다.

<button class="button"> ... </button>
<header class="header"> ... </header>
<div class="modal"> ... </div>
<textarea class="textarea"> ... </textarea>

2) Element

Block이 포함하고 있는, Block에서 별도로 사용할 수 없는 한 Block을 이루고 있는 부분이다.

Block이 전체라면, Element들은 조각을 일컫는다. 해당 Element는 두 개의 underscore로 표시한다.(block 이름에 underscore가 이미 있을 수 있으므로, 혼돈을 방지하기 위해 두 개를 사용함)

<div class="qna-form">
  <p class="qna-form__text">
    ....
  </p>
<div>

3) Modifier

Block 혹은 Element의 형태. 즉, 모양(color, size … ) 이나 상태 (focusing, disable,) 행동 (showing, enable) 등을 정의하며, 하이픈 두 개로 표현한다. ( — )

Block 에 바로 붙여서 사용할 수도 있고, Block의 Element에 붙여서 길게 사용할 수도 있다. 여기서 중요한 건 항상 Block의 일부여야 하며, 단독으로 사용해서는 안 된다.

<div class="modal__button--disable"> </div>
<!-- 키와 값은 하나의 하이픈으로 연결한다 -->
<div class="image--theme-ocean"> </div>
<div class="button--color-deep-blueable"> </div>

Reference
👉 네이밍 컨벤션 BEM
👉 네이밍 컨벤션이란