[HTML & CSS] : BEM 컨벤션으로 클래스명에 일관성 부여하기

변수명을 잘 짓는 것이 좋은 코드와 나쁜 코드를 판가름하는 중요한 요소라는 점에는 이견이 없을 것입니다!

const a = "chanmin"; // BAD

const userName = "chanmin"; // GOOD

그런데 CSS를 적용하기 위해 클래스명을 지을 때도 좋은 이름을 붙이고 계신가요?

저는 최근까지 그러지 못하고 있었다고 느껴서, 이번 기회에 CSS 클래스명 컨벤션을 정리해보고자 합니다. 😄

🙆🏻‍♂️ BEM (Block - Element - Modifier)

회사와 팀에 따라 컨벤션이 다를 수 있겠지만 가장 범용적으로 사용되는 규칙 중 하나가 바로 BEM으로,

BEM의 Block, Element, Modifier는 각각 다음과 같은 의미를 가집니다.

• Block : 재사용 가능한 컴포넌트의 최상위 단위 (Ex. 버튼 컴포넌트, 모달 컴포넌트 등)
• Element : 블럭의 하위 요소 (Ex. 버튼 내부의 "클릭" 텍스트 등)
• Modifier : 컴포넌트의 스타일을 변경할 때 사용할 단위 (아래 이미지 참조)

[변경자를 사용해 같은 버튼에 다른 스타일을 적용하는 예시]

좌 : btn--white / 우 : btn--blue

BEM 컨벤션을 활용할 때는 아래와 같이 클래스명을 명명합니다.

/* 공통 규칙 */
/* 1. 최대한 명확하게 작성하기 */
/* 2. 소문자, 숫자만 사용하기 */ 
/* 3. 여러 단어의 조합은 하이픈(-) 사용하기 */

/* Block 단위 클래스는 위의 규칙대로 작명합니다. */
.btn {}

/* Element 단위 클래스는 블록 뒤에 __ 을 붙여 작명합니다. */ 
.btn__price {}
/* 이 때, Element는 언제나 블럭의 하위 요소로만 사용됩니다. */
.btn__price__text (X)
.btn__text (O)

/* Modifier 단위 클래스는 적용할 클래스명 뒤에 -- 을 붙여 작명합니다. */
.btn--white {} 
.btn--big {}

BEM의 가장 큰 장점은 '작명법의 일관화' 라고 생각합니다.

컨벤션 없이 이름을 짓다 보면 자연스럽게 서로가 생각하는 (나름)최적의 방법으로 이름을 짓기 마련이라, 다음 문제들이 생길 수 있습니다.

1. 남이 볼 때 한눈에 의미를 파악하기 어려움
2. 같은 프로젝트 내에서 다른 컨벤션이 적용될 수 있음

한번 예를 들어 보겠습니다.

제가 티스토리를 시작하기 전에 만들었던 Gatsby 블로그로, 우측을 보시면 post-top, TopButton, button-red, background 등으로 무분별하게 클래스가 명명된 것을 확인할 수 있습니다.

 

이제 이 형식에 BEM을 적용하면 이런 식으로 쓸 수 있을 것입니다.

• post-top -> post-container__top
• TopButton -> post-container__button-container--top
• button-red -> post-container__button__red

그럼 만약 다른 사람이 와서 이 코드를 보면 "아, 빨간 버튼은 post-container 하위에서 button__red 를 찾으면 되겠구나" 라고 추측이 아닌 규칙을 통해 코드를 이해할 수 있게 됩니다.

 

다만 BEM에도 장점만 있는 것은 아닙니다.

어떻게 해야 클래스명이 명확할지는 여전히 숙제로 남아 있으며, --와 __ 으로 인해 난잡해 보이는 코드는 사람들의 반감을 사기도 합니다.

그럼에도 불구하고 BEM은 동료들과 스타일을 통일하는 좋은 약속이 될 수 있다는 점에서 저도 앞으로는 BEM을 적용해보려 합니다. 🤣