BEM 방법론 📚

CSS 클래스 작명을 체계화하여 코드의 재사용성과 유지보수성을 높이는 방법론을 말한다.

BEM은 Block, Element, Modifier의 약자로, 각 구성 요소를 명확히 구분하여 대규모 프론트엔드 프로젝트에서 혼란 없이 스타일을 적용할 수 있도록 도와준다.

 

 

BEM의 구성

1️⃣ Block (블록)

• 독립적인 UI 구성 요소를 말한다.
• 예: button, form, nav, modal 등

<div class="card">...</div>

 

 

2️⃣ Element (엘리먼트)

• 블록의 구성 요소
• 블록 없이 독립적으로 존재할 수 없다.
• __로 구분한다.

<div class="card__title">제목</div>
<div class="card__content">내용</div>

 

 

3️⃣ Modifier (수정자)

• 블록이나 엘리먼트의 변형된 상태나 스타일을 정의한다.
• --로 구분

<div class="card card--highlighted">...</div>
<div class="card__title card__title--large">큰 제목</div>

 

전체적인 BEM 스타일 예시

<div class="card card--highlighted">
  <h2 class="card__title">공지사항</h2>
  <p class="card__description">중요한 내용을 확인하세요.</p>
  <button class="card__button card__button--primary">확인</button>
</div>


.card {
  padding: 1rem;
  border: 1px solid #ccc;
  background-color: #fff;

  &--highlighted {
    background-color: #f9f871;
  }

  &__title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  &__description {
    font-size: 1rem;
    color: #666;
  }

  &__button {
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;

    &--primary {
      background-color: #007bff;
      color: white;
    }
  }
}

 

 

BEM의 장점

• 명확한 구조: 클래스만 봐도 어떤 역할인지 파악 가능
• 충돌 방지: 네이밍 충돌 최소화
• 유지보수 용이: 구조적 스타일 작성으로 수정이 쉬움
• CSS 모듈화에 유리: 컴포넌트 단위로 CSS를 나눌 때 유용

 

SCSS + BEM 결합의 장점

1️⃣ 구조적이고 명확한 CSS

• SCSS의 중첩 구조가 BEM의 계층적 관계를 자연스럽게 표현해주고, 어떤 컴포넌트의 어떤 부분인지 명확해진다.

2️⃣ 유지보수성 향상

• 관련 스타일을 한 파일 안에 묶어둘 수 있어 수정을 할 때 빠르게 파악이 가능하다.
• 팀원들이 쉽게 이해하고 이어서 작업 가능하다.

3️⃣ 네임스페이스 충돌 방지

• BEM 자체가 글로벌 네임스페이스 문제를 해결하는 방식이고, SCSS는 컴포넌트 단위로 파일을 쪼개기 때문에 충돌 위험이 더욱 줄어든다.

4️⃣ 스타일 재사용 최적화

• Modifier(--)를 통해 다양한 변형 케이스를 스타일 하나로 처리가 가능하다.
• SCSS 변수, 믹스인과 함께 쓰면 유지보수와 재사용성이 극대화된다.

 

단점 OR 주의사항

• 클래스명이 길어짐
• 초기에 익숙하지 않으면 번거로움
• 모든 상황에 강제 적용할 필요는 없기 때문에 혼란 가능성

 

컴포넌트 기반 개발시 사용 패턴 예제

<template>
  <div class="card card--highlighted">
    <h2 class="card__title">제목</h2>
    <p class="card__description">설명</p>
    <button class="card__button card__button--primary">버튼</button>
  </div>
</template>

<style scoped lang="scss">
@import './card.scss';
</style>

 

BEM은 클래스명으로만 구분되기 때문에 scoped 속성과도 잘 어울린다.

SCSS 모듈화 + 컴포넌트 기반 개발에 최적화되어 있다.

 

 

마무리

BEM은 특히 Vue, React 같은 컴포넌트 기반 프레임워크에서 CSS 유지보수를 효과적으로 하기 위한 전략으로 많이 사용된다.

팀원이 많거나 스타일 분리가 중요한 상황에서 특히 유용할 수 있다.

 

 

이상 스텔라였습니다. ✍️

 

 

개발하는 스텔라