BEM 방법론

BEM(Block, Element, Modifier) 방법론

CSS 클래스 명명 규칙으로 복잡한 사용자 인터페이스(UI)를 유지 관리하기 쉽게 도와준다.
코드의 재사용성과 확장성을 높이며, 스타일을 모듈화하고 명확하게 구조화하는 데 중점을 둠.

BEM의 구성 요소

Block (블록)
UI의 독립적이고 재사용 가능한 컴포넌트
페이지의 의미 있는 부분을 나타냅니다.
예: 메뉴, 헤더, 버튼 등.
클래스 명명 예: menu, header, button.

Element (엘리먼트)
블록 내에 있는 구성 요소로 블록의 일부
독립적으로 존재하지 않으며, 블록에 종속된 것.
블록과의 관계를 명확히 하기 위해 블록 이름 뒤에 두 개의 밑줄__을 사용
예: 메뉴 아이템, 헤더 로고, 버튼 아이콘 등
클래스 명명 예: menu__item, header__logo, button__icon.

Modifier (모디파이어)
블록이나 엘리먼트의 상태/모양/동작/변형을 나타냄.
이름 뒤에 두 개의 밑줄__ 대신 --을 사용합니다.
예: 활성화된 상태, 비활성화된 상태, 크기 등.
클래스 명명 예: button--active, header__logo--small.

예문

<div class="menu">
    <div class="menu__item menu__item--active">Home</div>
    <div class="menu__item">About</div>
    <div class="menu__item">Contact</div>
</div>

/* Block */
.menu {
    background-color: #333;
    color: white;
    display: flex;
    padding: 10px;
}

/* Element */
.menu__item {
    margin-right: 10px;
}

/* Modifier */
.menu__item--active {
    font-weight: bold;
}

BEM의 단점

긴 클래스 이름
클래스 이름이 길어질 수 있어 코드가 다소 장황해질 수 있습니다.
초기 학습 곡선
처음 사용하는 개발자에게는 규칙을 익히는 데 시간이 걸릴 수 있습니다.

[참고 게시글] [CSS] CSS 방법론 - BEM 이해하기