BEM(Block, Element, Modifier) 방법론: HTML 명명 규칙

 

 

 

 

📌 BEM (Block, Element, Modifier)

: HTML 요소들을 block과 그에 포함된 element로 구분하고, 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙

 

기본 구조

block__element--modifier

 

 

---

 

 

📍 Block (블록)

: block(블록)은 페이지 전체 요소를 감싸는 컨테이너

• 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다 ❌
• 클래스를 적용할 수 있는 DOM 노드라면 뭐든 블록이 될 수 있다 ⭕

 

 

🔺 Naming

그냥 원하는 이름으로 표기

 

 

 

🔺 CSS

• 클래명만 사용 ⭕
• 태그 이름, ID 중첩 사용 금지 ❌

/* O */
.block {
  color: #e5e5e5;
}

/* X */
div.block {
  color: #e5e5e5;
}

 

 

 

---

 

 

📍 Element (요소)

: 블록의 하위 요소

• 요소명은 어떤 목적인지 나타낸다.
• 모든 요소는 상위 블록과 연결된다.

 

 

🔺 Naming

소속 block명__요소명

<div class="block__element"></div>

 

 

 

 

🔺 CSS

• 클래명만 사용 ⭕
• 태그 이름, ID 중첩 사용 금지 ❌
•  

// O
.box__apple {
  background-color: red;
}

// X
.box .box__apple {
  background-color: red;
}

 

 

 

---

 

 

📍 Modifier (수정자)

: 해당 요소의 형태(상태)를 나타낸다.

 

 

🔺 Naming

소속 block명__요소명--디자인 특성   |  소속 block명--디자인 특성

• 수정자의 이름이 길거나 공백이 있다면 대시(-)를 사용한다.
  (ex. block--border-black)

<div card__side--front>
   <div card--large>
     a
   </div>
</div>

 

 

---

 

 

출처

BEM: CSS를 위한 HTML 클래스 명명규칙

 

BEM 방법론 정리 (네이밍 규칙)

 

 

BEM(Block Element Modifier)이란?