목차

1. BEM 네이밍 규칙이란?
2. Block
3. Element
4. Modifier

출처

BEM 네이밍 규칙이란?

• https://velog.io/@nemo/bem

BEM 네이밍 규칙 상세한 작성 방법

• https://nykim.work/15

1. BEM 네이밍 규칙이란?

CSS 작업 시 우리는 CSS 클래스를 중복되지 않게 작성하는 것이 굉장히 중요하다. 따라서 이런 작업을 수월하게 하고 여러 사람들이 봤을 때 가독성도 좋게 하기 위한 방법 중 하나가 바로 BEM 네이밍 규칙이다.

BEM네이밍 규칙은 CSS의 이름 짓는 규칙 중 가장 많이 쓰이고 있습니다.

이 BEM네이밍 규칙은 클래스 이름만 보고도 쉽게 이해할 수 있다는 것이 큰 장점이다.

BEM 기본 구조

B(Blcok) : 블록
E(Element) : 요소
M(Modifier) : 수정자

2. Block

block은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 블록이라고 부릅니다.
즉, 어딘가 종속되지 않고 어디에나 갖다가 쓸 수 있는 요소를 블럭이라고 합니다.

주의사항

• 클래스 이름만 사용한다.
• 태그 이름, ID 중첩 사용 금지
• 다른 블록에 대한 종속성이 없다.

---

3. Element

element는 블록을 구성하는 단위입니다.

즉, block의 하위 요소임과 동시에 상위요소인 block에 의존적인 형태를 지니고 있습니다.

블록이름__요소이름의 형태로 작성한다.

예시

<div class="block">
  <div class="block__elem"></div>
</div>
<div class="wrapper">
  <div class="wrapper__item"></div>
</div>

Good

.box__apple {
  background-color: red;
}

Bad

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

---

4. Modifier

Modifer는 블럭이나 엘리먼트의 속성을 담당합니다. 생긴 게 조금 다르거나, 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 됩니다.

블럭이름--수정자이름 혹은 요소이름--수정자이름 형태로 작성한다.

예시

<ul class="tab">
  <li class="tab__item tab__item--focused">탭 01</li>
  <li class="tab__item">탭 02</li>
  <li class="tab__item">탭 03</li>
</ul>