CSS_BEM네이밍 규칙

Mary·2025년 1월 24일

CSS

목록 보기

11/19

BEM (Block-Element-Modifier) 스타일은 CSS 클래스 네이밍 규칙으로,
HTML과 CSS를 구조적으로 깔끔하게 유지하는 데 도움을 줘.

✅ BEM 기본 구조

BEM은 3가지 개념으로 나뉘어:
1. Block (블록)
2. Element (엘리먼트)
3. Modifier (수정자)

.block__element--modifier

block: 독립적인 큰 구성 요소 (예: 버튼, 카드, 네비게이션)
element: 블록 내부의 구성 요소 (예: 버튼 아이콘, 카드 제목)
modifier: 블록이나 요소의 상태/변형 (예: 비활성화, 색상 변경)

📌 1. Block (블록)

🔹 블록이란?

하나의 독립적인 UI 컴포넌트
재사용 가능해야 함
다른 블록과 독립적으로 존재

💻 예제

<div class="card">내용</div>

.card: 블록 (독립적인 카드 컴포넌트)

.card {
    width: 300px;
    border: 1px solid #ccc;
    padding: 20px;
    background: white;
}

📌 2. Element (엘리먼트)

🔹 엘리먼트란?

블록 내부의 구성 요소 (블록 없이는 존재할 수 없음)
block__element 형식 사용 (__ 두 개의 밑줄)

💻 예제

<div class="card">
    <h2 class="card__title">카드 제목</h2>
    <p class="card__description">카드 설명</p>
</div>

.card__title: 카드 블록의 제목
.card__description: 카드 블록의 설명

.card__title {
    font-size: 20px;
    font-weight: bold;
}
.card__description {
    color: gray;
}

✅ 엘리먼트는 단독으로 사용하지 않음
❌ <h2 class="title"> (X, 범용적인 이름)
✅ <h2 class="card__title"> (O, 특정 블록과 연결됨)

📌 3. Modifier (수정자)

🔹 수정자란?

블록이나 엘리먼트의 변형(스타일 변경)
block--modifier 또는 block__element--modifier 형식 사용 (-- 두 개의 대시)

💻 예제

<div class="card card--highlighted">
    <h2 class="card__title">카드 제목</h2>
    <p class="card__description card__description--bold">카드 설명</p>
</div>

.card--highlighted: 강조된 카드 스타일
.card__description--bold: 굵은 텍스트 스타일

.card--highlighted {
    background: yellow;
}
.card__description--bold {
    font-weight: bold;
}

🚀 실전 예제: BEM 스타일을 사용한 버튼

<button class="button button--primary">확인</button>
<button class="button button--secondary">취소</button>

.button {
    padding: 10px 20px;
    border-radius: 5px;
}
.button--primary {
    background: blue;
    color: white;
}
.button--secondary {
    background: gray;
    color: black;
}

✅ button이 블록, button--primary와 button--secondary가 수정자!

🔹 BEM을 쓰면 좋은 점

장점	설명
네이밍이 명확	클래스명이 역할을 설명해 주므로 이해하기 쉬움
재사용성 증가	`block`은 독립적으로, `modifier`로 스타일 확장 가능
CSS 충돌 방지	전역 스타일 충돌이 줄어듦 (범용적인 `.title` 대신 `.card__title` 사용)

✅ BEM 네이밍 정리

개념	네이밍 규칙	예시
Block (블록)	`.block`	`.card`, `.button`, `.menu`
Element (엘리먼트)	`.block__element`	`.card__title`, `.button__icon`
Modifier (수정자)	`.block--modifier` 또는 `.block__element--modifier`	`.card--highlighted`, `.button--disabled`