[CSS] BEM 방법론

1. 정의

Bem은 코드의 가독성을 높이고 효율성을 높이기위한 css 개발 방법론이다. BEM(Block / Element / Modifier)은 기본적으로 ID를 사용하지 않고 class만 사용한다. 문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시한다.

.Block__Element--Modifier {
	color: black;
}

목적에 따라 네이밍을 정한다.

1) Block

재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 칭한다. 블럭은 블럭을 감쌀 수 있다.

2) Element

엘리먼트는 블럭을 구성하는 단위이다. 블럭은 독립적인 형태인 반면, 엘리먼트는 의존적인 형태이다. 즉 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다. 블럭은 전체를 말하고 요소들은 그 조각들을 일컫고 각 요소는 두개의 밑줄표시로 연결하여 블럭 다음에 위치시킨다.

중요한 점은, 클래스명은 간단하고 명확하며 정확하게 유지해야 한다는 것으로 너무 고민하지 않도록 한다. 스타일시트와 HTML 역시 DRY(Don't Repeat Yourself)로 유지되어야 하기 때문이다. 더 나은 의미론적인 방식을 찾았을때 클래스명을 업데이트 시키는데는 문제가 없어야 한다.

.header__logo { property: value; } 
.header__tagline { property: value; } 
.header__searchbar { property: value; } 
.header__navigation { property: value; }

search-form => search 컴포넌트의 form element를 의미한다.

3) Modifier

modifier는 블럭 또는 요소의 속성이다. 이 속성은 블럭 또는 요소의 외관이나 상태를 변화시키는 것이다. 클래스 명을 지을때의 목적은 그 요소를 반복하여 재사용할 수 있게 하기 위한 것이어서 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 된다.

2. BEM을 사용하는 이유

코드의 명료함을 가져다 주고, 더 잘 정의할 수 있도록 도와주며, 프론트엔드 개발면에서 분류의 체계를 설정할 수 있도록 만든다. BEM 방법론은 프로토타입을 더 효율적으로 만들어 제품 수준의 코드로 빨리 전환하는데 큰 도움을 준다.