[ CSS3 ] BEM(Block–Element–Modifier)

 

BEM이란?

BEM은 CSS 클래스 네이밍 규칙으로, UI를 독립적인 블록 단위로 분리하고 구조와 상태를 명확히 표현하는 것

 

 

• 유지보수성 ↑
• 스타일 충돌 ↓
• 컴포넌트 재사용성 ↑
• 대규모 프로젝트에 특히 유리

 

이 요소가 어떤 컴포넌트인지 / 그 안의 어떤 부분인지 / 어떤 상태인지를 이름에 드러내는 방법
BEM은 Block, Element, Modifier의 약자이고, UI를 독립적인 블록 단위로 나눠 재사용성과 유지보수성을 높이려는 네이밍 규칙입니다.

 

 

 클래스 이름만 봐도 구조와 상태가 보이게 만드는 규칙 

• 구조: Block__Element
• 상태/변형: --Modifier
• CSS를 설계 관점에서 작성하게 만들어줌

 

 

• Block: 독립적으로 의미 있는 컴포넌트
  예: card, button, menu
• Element: 블록 안에 속한 구성 요소
  예: card__title, card__button
• Modifier: 블록이나 요소의 상태/변형
  예: card--featured, card__button--disabled

 

block, block__element, block--modifier, block__element--modifier 형태를 씁니다.
그리고 modifier는 보통 기본 클래스와 함께 붙입니다. 예를 들어 class="card card--featured"처럼 씁니다.

 

 

https://getbem.com/naming/

BEM — Naming

 

https://en.bem.info/methodology/quick-start/

Quick start / Methodology / BEM

 

 

 

BEM 구성 요소

 

1. Block

독립적인 UI 컴포넌트의 최상위 단위

• 단독으로 의미를 가짐
• 다른 블록에 의존하지 않음

header
card
button
modal


.card {}
.button {}

 

 

2. Element

Block 내부에 포함된 구성 요소

• 반드시 Block에 종속
• 혼자서는 의미가 없음
• __ (언더스코어 2개) 사용

block__element


.card__title {}
.card__image {}
.card__description {}

 

 

잘못된 예

.title {}        /* 어떤 블록의 title인지 알 수 없음 */

 

 

3. Modifier

Block 또는 Element의 상태 / 변형 / 버전

• -- (하이픈 2개) 사용
• 크기, 색상, 활성화 상태 등 표현

block--modifier
block__element--modifier

 

.button--primary {}
.button--disabled {}

.card__title--large {}

 

 

상태로 분리

.card__title--error {}

 

역할 기반 네이밍

.card__title {}

 

 

 

기본문법 규칙 

✔ 항상 class 하나 = 역할 하나
✔ 태그 이름, 위치, 스타일 의미를 클래스에 섞지 않음

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

 

 

예

HTML

<div class="card card--featured">
  <img class="card__image" src="img.jpg" alt="" />
  <h3 class="card__title">Title</h3>
  <p class="card__desc">Description text</p>
  <button class="card__button card__button--primary">
    Read more
  </button>
</div>

 

CSS

.card {
  padding: 20px;
  border: 1px solid #ddd;
}

.card--featured {
  border-color: gold;
}

.card__image {
  width: 100%;
}

.card__title {
  font-size: 1.2rem;
}

.card__desc {
  color: #666;
}

.card__button {
  padding: 8px 12px;
}

.card__button--primary {
  background: black;
  color: white;
}

 

 

 

예)

<div class="card card--featured">
  <h2 class="card__title">상품 제목</h2>
  <p class="card__desc">상품 설명입니다.</p>
  <button class="card__button card__button--disabled" disabled>
    구매하기
  </button>
</div>

 

SCSS

.card {
  padding: 16px;
  border: 1px solid #ddd;
}

.card--featured {
  border-width: 2px;
}

.card__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.card__desc {
  font-size: 14px;
  margin-bottom: 12px;
}

.card__button {
  padding: 8px 12px;
}

.card__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

 

 

 

• card → 카드 컴포넌트 자체
• card__title → 카드 안의 제목
• card__button → 카드 안의 버튼
• card--featured → 강조된 카드 상태
• card__button--disabled → 비활성화된 버튼 상태

.block {
  &__element {}
  &--modifier {}
}

 

 

.button {
  &__icon {}
  &--primary {}
  &--large {}
}

 

 

이름만 보고 구조와 역할이 바로 보여야 합니다.

 

 

예

<div class="con con1">
                    <div class="inner">
                        <ul>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-women.jpg" alt="Women" /></div>
                                    <strong>Women</strong>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-men.jpg" alt="Men" /></div>
                                    <strong>Men</strong>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div><img src="images/cat-acc.jpg" alt="Accessories" /></div>
                                    <strong>Accessories</strong>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

 

변경

<section class="category">
    <div class="category__inner">
        <ul class="category__list">
            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-women.jpg" alt="Women" />
                    </div>
                    <strong class="category__title">Women</strong>
                </a>
            </li>

            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-men.jpg" alt="Men" />
                    </div>
                    <strong class="category__title">Men</strong>
                </a>
            </li>

            <li class="category__item">
                <a href="#" class="category__link">
                    <div class="category__image">
                        <img src="images/cat-acc.jpg" alt="Accessories" />
                    </div>
                    <strong class="category__title">Accessories</strong>
                </a>
            </li>
        </ul>
    </div>
</section>