어떤 CSS 방법론을 사용하는지에 따라 프로젝트의 형태와 규칙이 달라진다. 많은 방법론 중 BEM에 대해서 알아보자.

TOC

• 기본 규칙
• Block - 블록
• Element - 요소
• Modifier - 수식어, 변환자

기본 규칙

1. 소문자, 숫자만 사용해서 작명한다.
2. 여러 단어의 조합은 하이픈(-)으로 연결하여 작명한다.

Block - 블록

• 재사용할 수 있는 기능적으로 독립적인 페이지 구성 요소, HTML에서 블록은 class 속성으로 표시한다.
• 형태(red, big)가 아닌 목적(Menu, Button)에 따라서 결정해야 한다.
• 블록은 환경에 영향을 받지 않아야 한다. 즉, 여백이나 위치를 설정하면 안된다.
• tag, id 선택자를 사용해서는 안된다.
• 블록은 서로 중첩해서 작성할 수 있다.

예) header, menu, search-form

Element - 요소

• 블록 안에서 특정 기능을 담당하는 부분: block__element 형태로 사용 (더블 언더바)하며, 형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
• 요소는 중첩해서 작성할 수 있다.
• 요소는 블록의 부분으로만 사용할 수 있고 다른 요소의 부분으로 사용할 수 없다.
• 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 블록 안에 요소가 없을 수 있다.

예) menu__item, header__title

Modifier - 수식어, 변환자

• 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다. block__element—modifier, block—modifier 형태로 사용(더블 하이픈)
• 수식어의 Bool 타입과 키-벨류 타입이 있다.
  • Bool 타입: 수식어가 있으면 값이 true 라고 가정한다. (form__button—disabled) 키
  • Value 타입: 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
• 수식어는 단독으로 사용할 수 없다. 기본 블록과 요소에 추가하여 사용해야 한다.

<div class="header">
  <div class="search-form header__search-form"></div>
</div>

Reference

• BEM_Naming