BEM 표기법

BEM이란?

BEM은 "Block, Element, Modifier"의 약자로 CSS를 작성하는 방법론 중 하나입니다. 이 표기법은 Yandex에서 개발되었으며, 웹 사이트의 스타일을 더 쉽게 유지하고자 하는 웹 개발자들 사이에서 널리 사용되고 있습니다.

BEM 방법론에 따르면 CSS 클래스는 다음 세 가지 유형으로 나눌 수 있습니다.

• Block: 독립적으로 의미를 가지는 구성 요소로, HTML에서 재사용 가능한 독립적인 엔티티를 나타냅니다. 예를 들어, 헤더, 컨테이너, 메뉴, 체크박스 등이 이에 해당합니다.
  
  
• Element: 블록 내부의 구성 요소로, 자체적으로는 의미를 가지지 않지만 블록의 일부로서 의미를 가집니다. 예를 들어, 메뉴 항목, 헤더 제목, 체크박스 레이블 등이 이에 해당합니다.
  
  
• Modifier: 블록이나 요소의 모양, 상태 및 동작을 변경하는 속성입니다. 예를 들어, 비활성화 상태, 체크된 상태, 컬러 테마 등이 있습니다. 이들은 클래스 이름에 대한 BEM의 명명 규칙에 따라 나타낼 수 있습니다.

Block__Element--Modifier 형식을 따릅니다.
Block은 항상 블록 이름으로 시작합니다.
Element는 두 개의 밑줄(__)로 블록 이름과 구분합니다.
Modifier는 두 개의 하이픈(--)로 블록 또는 요소 이름과 구분합니다.

BEM  표기법 예시

<div class="card">
  <img class="card__image" src="image.jpg" alt="Image Description">
  <div class="card__content">
    <h2 class="card__title">Card Title</h2>
    <p class="card__text">This is some text within a card.</p>
  </div>
  <button class="card__button card__button--disabled">Button</button>
</div>

여기서 각 CSS 클래스의 의미는 다음과 같습니다:

• card: Block입니다. 독립적으로 의미를 가지는 컴포넌트입니다.
• card__image, card__content, card__title, card__text, card__button: Element들입니다. card 블록의 일부로서 의미를 가지는 구성 요소입니다.
• card__button--disabled: Modifier입니다. card__button 요소의 상태를 나타냅니다.
  그리고 이에 대응하는 CSS는 다음과 같이 작성할 수 있습니다.

.card {
  /* Some styles */
}

.card__image {
  /* Some styles */
}

.card__content {
  /* Some styles */
}

.card__title {
  /* Some styles */
}

.card__text {
  /* Some styles */
}

.card__button {
  /* Some styles */
}

.card__button--disabled {
  /* Some styles */
}

이런 식으로 BEM 표기법을 활용하면, 각 CSS 클래스가 어떤 역할을 하는지, 그리고 어떤 구조 안에서 작동하는지 쉽게 이해할 수 있습니다.