# BEM(Block Element Modifier) 방법론

CSS 개발 방법론 중 BEM 방법론을 알아보자.

BEM 방법론은 문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시한다.

BEM 방법론은 ID에는 사용할 수 없고, 오직 Class에만 사용 가능하다.

# Block(전체를 감싸고 있는 블럭요소)

블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다.

Header, Footer, Side-bar, Main-content 영역을 가지고 있다면, 이 각각의 영역들이 블럭으로 간주되는 것이다.

아래의 그림을 참고하자.

Block

블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치한다.

일단 블럭을 정의하면, 블럭이 형성한 클래스의 어근을 맨 앞에 붙여 그 블럭이 포함하는 요소들의 클래스명을 짓기 시작하면 되는 것이다.

요소(element)는 블럭이 포함하고 있는 한 조각이다.

블럭은 전체를 말하고, 요소들은 그 조각을 일컫고, 각 요소는 두개의 밑줄표시로 연결하여 블럭 다음에 위치 시킨다.

.block__element {
  property: value;
}

두개의 밑줄 표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와준다.

modifier는 블럭 또는 요소의 속성이다. 이 속성은 블럭 또는 요소의 외관이나 상태를 변화시키는 것이다.

클래스명을 지을 때의 목적은 그 요소를 반복하여 재사용할 수 있게 하기 위한 것이기 때문에, 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 된다.

Modifier는 두개의 하이픈('--')을 추가하여 표시한다.

간단한 예는 다음과 같다.

.block__element--modifier {
}