BEM 방법론에 따라 클래스명 짓기

BEM Methodology

BEM은 클래스 이름에 Block, Element, Modifier를 함께 작성하는 방법론으로, 개발자들로 하여금 HTML과 CSS의 관계에 대한 이해가 쉽도록 하는 목표를 가지고 만들어진 명명 규칙입니다. 정말 쉽기 때문에 공식 사이트에서 확인하셔도 좋지만, 본문을 통해 가볍게 소개해 보려 합니다.

아래 코드는 BEM 스타일을 적용한 CSS 코드입니다.

/* 컴포넌트 요소(Block) */
.card {}

/* 컴포넌트에 의존성이 있는 요소(Element) */
.card__image {}
.card__description {}
.card__button {}

/* 컴포넌트의 스타일 수정자(Modifier) */
.card--success {}
.card--back {}

Block은 재사용 가능한 컴포넌트가 될 요소를 추상화한 것이며, 내부에 포함되는 나머지 요소(Element)들은 두 개의 _(언더스코어)와 함께 이름을 적어주면 됩니다. 그리고 수정자(Modifier)는 Block이나 Element에 스타일(색상, 폰트 크기 등)을 적용하기 위한 역할이며, 두 개의 -(대시)와 함께 이름을 작성하면 됩니다.

그렇게 위 CSS에 대응되는 HTML 코드는 이렇게 짜 볼 수 있습니다.

<div class="card">
  <img src=".." alt=".." class="card__image" />
  <p class="card__description">......</p>
  <button type="button" class="card__button card__button--success">
    Confirm
  </button>
  <button type="button" class="card__button card__button--back">Back</button>
</div>

이렇게 BEM 방법론에 따라 클래스 이름을 짓게 되면, 유연하면서도 재사용 가능한 구성 요소를 만드는데 많은 도움을 얻을 수 있습니다. 그리고 앞서 언급한 것처럼 요소 간 계층 관계를 파악하기 쉽고, 이름을 짓기 위해 고민을 하는데서 발생하는 비용도 줄일 수 있습니다.

지금까지 다룬 내용을 그림으로 보면 다음과 같습니다.

어떤가요? 그림으로도 확인해 보니 이해가 잘 되시나요?

이처럼 BEM은 장점이 많습니다만, 단점과 문제 역시 존재합니다. 같이 정리해 볼게요 😀

장점:

• CSS 성능 향상
• 프로젝트에 모듈식 구조 제공
• 고유한 이름 체계로 인해 CSS 충돌 방지
• HTML과 CSS의 계층 관계 파악이 쉬움
• 간단하게 CSS 업데이트 가능

단점:

• 너무나 길어질 수 있는 클래스 이름
• SASS・SCSS에서의 긴 네스팅(Nesting)

위에 적은 두 가지 단점 외에도 불편한 부분들이 종종 생기긴 합니다. 그래서 BEM을 사용했을 때 일반적으로 직면할 수 있는 문제들에 대해 소개하고, 이를 해결할 수 있는 방법을 정리한 글이 있는데, 기회가 되면 한 번 번역해서 블로그에 담아보겠습니다. 일단은 참고 자료 부분에 추가해 드릴 테니, BEM을 더 효율적으로 사용하길 원한다면 꼭 한 번 읽어보시기 바랍니다.

References

• [CSS Trick] BEM 101
• What is BEM methodology?
• Battling BEM CSS: 10 Common Problems And How to Avoid Them