CSS 네이밍 규칙 - BEM

Jnns·2023년 12월 4일

CSS

CSS 네이밍 방법론

CSS에서 class 네이밍을 할 때 작성하는 방식으로 일종의 naming convention 이다.

한마디로 CSS를 사용할 때 클래스 네이밍을 어떻게 지을지, 어떤 방식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하기 위해 정의된 일종의 규칙이다.

CSS 방법론에는 여러가지가 있지만 가장 대표적인 3가지는 다음과 같다.

BEM
OOCSS
SMACSS

BEM

BEM 규칙은 직관적인 규칙을 통해 쉬운 의미 예측을 가능하게 하는 네이밍 기법이다.

Block(블록), Element(요소), Modifier(상태) 으로 구성되고 각 부분을 __와 --로 구분한다. BEM은 기본적으로 ID를 사용하지 않으며, class만을 사용하고 '어떻게 보일지'보다 '어떠한 목적인가'에 초점을 두어 이름을 짓는다. 예를 들어, 에러 메시지를 띄우는 태그에는 .red가 아닌 .error라는 이름을 줘야한다.

BEM 규칙을 이해하려면 먼저 Block(블록), Element(요소), Modifier(상태)가 뭔지 알아야 한다.

Block

재사용이 가능하고 어딘가에 종속되어 있지 않은, 기능적으로 독립적인 컴포넌트이다.
독립적으로 사용되어야 하기에 padding, margin, position 등의 여백이나 위치값은 직접적으로 선언하지 않는 것이 바람직하다.
중첩이 가능하며, block끼리는 상호작용 할 수 있지만, 우선순위나 계층이 없다.
ex) user-component__title

Element

block에서 분리되어 사용할 수 없는, 블록의 일부분이다.
자신이 속한 block 내에서만 의미를 가지기 때문에 의존적이다.
요소는 서로 중첩될 수 없다.
ex) user-component__title

Modifier

Block이나 Element의 속성(상태 또는 행동) 담당한다. 생긴 게 조금 다르거나(예: not--bold) 다르게 동작하는 블럭이나 엘리먼트를 만들 때, 추가하는 방식으로 사용한다.

modifier의 경우 표기법이 여러가지라 헷갈렸는데, 가장 최근에 포스팅된 블로그 글을 보니 한개의 밑줄( _ ), 하이픈( - ), 혹은 더블 하이픈( -- )을 사용하기도 한다고 한다.
두개의 밑줄( __ )이 아닌 경우 + 상태를 나타낼 때 modifier로 이해해야 할 것 같다.

ex)
user-component__title_not-bold

user-component__title-not-bold

user-component__title--not-bold