[ CSS3 ] BEM(Block–Element–Modifier)

 

BEM이란?

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

 

 

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

 

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

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

 

 

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="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>