BEM 방법론

해당 포스트는 BEM 방법론 페이지 를 간단하게 번역하여 추가적으로 내용을 덧붙인 글입니다. 잘못된 부분은 언제든지 댓글로 알려주시면 감사하겠습니다!

1. BEM 방법론의 등장

컴퓨터 과학 분야에선 오직 두가지 어려움만이 존재한다. 캐시 무효화, 그리고 변수 이름 짓기. - Phil Karlton

알맞은 스타일 가이드를 사용하면 개발 속도, 디버깅 성능을 향상시킬 수 있을 뿐만 아니라 레거시 코드에서 새로운 기능을 구현할 때도 편리하다.

하지만 다른 개발 언어와 다르게 CSS 는 어떤 구조나 네이밍 규칙이 없이 개발되는 경우가 흔하다. 구조나 규칙없이 작성되었기에 보기 어려운 코드가 되고, 보기 어려운 코드는 추후 유지관리가 불가능한 코드가 된다. 그래서 CSS 의 네이밍 규칙으로 나온 것이 BEM 방법론이다.

BEM 방법론은 적절한 이름을 짓도록 하여 코드의 일관성을 보장하고 추후 유지보수에 있어 디자인 변경 문제를 쉽게 해결할 수 있도록 한다.

2. BEM 설명

BEM 은 Block , Element , Modifier 의 약자를 따서 지었다.

Block

혼자서 사용될 수 있는 독립적인 컴포넌트다.

Element

혼자서 사용될 수 없으며, Block 요소에 연결되어 의미를 가지고 있는 요소이다.

Modifier

Block 혹은 Element 의 모양이나 속성, 동작을 변경하는 데 사용한다.

이렇게만 보면 각자 어떤 역할을 하는지 감이 잡히지 않으니 직접 예제를 통해 이해해보자.

3. Block

Block 은 혼자서 사용될 수 있는 독립적인 요소를 의미한다. Block 끼리는 상호작용할 수 있고 각 Block 끼리는 의미상 동등한 우선순위와 구조를 가진다.

이름

컴포넌트 이름의 경우 라틴 문자, 숫자, 대시(-) 으로 구성된다.

CSS 클래스의 경우 앞에 클래스 prefix 를 붙여서 나타낸다. (ex .menu)

header, menu, container, checkbox, input… 등의 요소는 Block 요소이다.

html

다음과 같이 단일 형태로 사용한다.

<div class='menu'></div>

SCSS

오직 클래스 이름 선택자만 사용하며 html 태그나, id 선택자를 사용하지 않는다.

// Good
.menu { 
	width: 300px;
	height: 500px;
} 

// Bad
#menu { }
aside { }

또한 다른 Block 이나 Element 요소에 종속되지 않는다.

// Good
.menu {
	width: 300px;
	height: 500px;
}

// Bad
main {
	.menu { }
}

4. Element

Block 을 구성하고 있는 요소로 혼자선 의미를 가질 수 없다. 모든 Element 는 의미적으로 Block 과 연결되어 있다.

이름

라틴 문자, 숫자, 대시, 언더바로 나타낼 수 있다.

CSS 클래스 이름으로 사용할 경우 Block 의 이름과 Element 의 이름을 언더바 두개로 연결한다.

Block + __ + Element

html

Block 안의 요소는 모두 Element 가 될 수 있으며, 같은 Block 요소 내 Element 는 모두 Block 에 종속돼 있을 뿐이지 구조적으로 동등한 우선순위를 가진다.

그래서 Element 안에 들어있는 Element 라고 하더라도 중복해서 더블 언더바로 연결해줄 필요가 없다.

// Good
<div class='menu'>
	<div class='menu__item'>
		<div class='menu__icon'></div>
		<div class='menu__name'></div>
	</div>
</div>

// Bad
<div class='menu'>
	<div class='menu__item'>
		<div class='menu__item__icon'></div>
		<div class='menu__item__name'></div>
	</div>
</div>

SCSS

위와 같이 이름을 붙여 쓰면 SCSS 에서 상위 요소 선택자를 사용하여 간편하게 작성할 수 있다.

// Good
.menu {
	&__item {
		width: 100%;
		height: 50%;
	}
}
// Good
.menu__item { }

// Bad 
.menu .menu__item { }
div.menu__item { }

5. Modifier

Modifier 는 Block 또는 Element 의 모양, 동작 혹은 상태의 변화를 나타내는 이름이다.

이름

라틴 문자, 숫자, 대시, 언더바로 나타낼 수 있다.

CSS 클래스 이름으로 사용할 경우 Block 또는 Element 요소에 두개의 대시기호를 붙인다.

Block + -- + Modifier

Element + -- + Modifier

html

기존의 클래스 이름은 그대로 두고 수정할 Block 이나 Element 에 수정된 클래스 이름을 추가한다.

// Good
<div class='menu menu--mode'>
	<div class='menu__item menu__item--blue'></div>
	<div class='menu__item menu__item--red'></div>
</div>

// Bad
<div class='menu--mode'>
	<div class='menu__item--blue'></div>
	<div class='menu__item--red'></div>
</div>

SCSS

modifer 이름을 셀렉터로 사용한다. 마찬가지로 SCSS 에선 다음과 같이 쓸 수 있다.

// Good
.menu {
	&--mode{
		display: flex;
	}

	&__item {
		&--red {
			background-color: red;
		}
	}
}

// Bad
.menu .menu--mode {}
.menu__item .menu__item--red {}