[CSS] BEM 방법론

BEM (Block Element Modifier)

BEM은 CSS 구조를 개선하기 위한 CSS 개발 방법론 중 하나로, 클래스만을 활용하여 구조화하며 클래스 네이밍에 대한 방법을 제시한다.

BEM은 Block Element Modifier의 약자로 구분자 __와 --를 이용해 다음과 같이 네이밍 한다.

.header__nav--subnav {
	color: blue;
}

위 예시에서 header는 Block, nav는 Element, subnav는 Modifier에 해당한다.

그렇다면 Block, Element, Modifier가 의미하는 바를 알아보자.

Block

블럭은 기능적으로 독립적인 요소를 의미한다.

예를 들어 웹페이지가 다음과 같은 구조라면

header, nav, section...이 해당된다.

Element

블록 안에서 특정 기능을 담당하는 부분이다.
__(더블 언더바)를 사용하여 'block__element' 형태로 작성한다.

ex) header__title, header__logo, form__input

Modifier

블록이나 요소의 속성을 정의한다.
여기에서 속성이란 블록 또는 요소의 외관이나 상태 등을 의미한다.
요소 또는 블럭 다음에 -- 두 개의 하이픈을 사용해 'block__element--modifier' 또는 'block--modifier' 형태로 작성한다.

boolean type과 key-value type이 있다.

• boolean type: 값이 true라고 가정하고 사용
  ex) tab__item tab__item--focused, form__button--disabled
  
  
• key-value type: 하이픈 -을 사용하여 '성질 - 내용'을 표시
  ex) form--theme-default, form--theme-dark