block__element_modifier모듈 기반의 방법론 (+mix)
공식 문서(https://en.bem.info)에서는 BEM을 이렇게 설명한다.
BEM(Block, Element, Modifier)는 컴포넌트 기반 접근 방식이다. 기본 아이디어는 사용자 인터페이스(UI)를 독립된 블록으로 나누는 것이다. 이를 통해 복잡한 UI도 쉽고 빠르게 개발할 수 있으며, 기존 코드를 재사용할 수 있는 장점이 있다.
BEM은 모듈을 Block, Element, Modifier 단위로 분해하며, 각 앞 글자를 따서 BEM으로 부른다. BEM은 러시아 Yandex사에서 개발한 방법론으로 실제로 이 방법에 기반한 CSS 설계 기법이 널리 사용되고 있지만 BEM은 CSS에만 국한되지는 않는다.
그렇다면 BEM의 공통 규칙과 모듈의 개별 규칙을 알아보자.
CSS style을 위한 BEM 공통 규칙
– ID 셀렉터와 태그 셀렉터를 사용하지 않는다.
– 네스팅된 셀렉터 사용을 최소화한다.
– CSS 클래스 네이밍 컨벤션을 사용하여 이름 충돌을 피하고 셀렉터의 목적을 명확하게 한다.
– Blocks, Elements, Modifiers를 구분하여 사용한다.
– Blocks를 재사용한다.
BEM의 네이밍 규칙
모두 소문자를 사용하며, 두 단어는 하이픈(-)으로 연결한다.
| Block | – | block, block-two |
| Element | block 이름을 상속받아 언더스코어 두 개(__)로 연결 | block__element, block-two__element-two |
| Modifier | Block/Element 이름 상속받아 언더스코어 하나(_)로 연결. 키-값 쌍은 스네이크 케이스(_)를 사용. | block_modifier, block__element_modifier, element_key_value |
| Modifier (MindBEMding) | Block/Element 이름 상속받아 하이픈 두개(–)로 연결. 키-값에서 키는 생략가능. | block–modifier, element–value |
모듈의 개별 규칙
논리적, 기능적으로 독립되어 재사용이 가능한 모듈로 정의한다. 클래스 이름은 ‘형태’가 아니라 ‘목적, 용도’를 나타내야 한다.
EX) head, logo, menu (O)
blue-button, small-title (X)
block은 다른 block 내부에서도 사용할 수 있으며, modifier를 통해 위치나 모양을 변경할 수 있다.
그림 – block의 중첩(출처: en.bem.info)
Element
block을 구성하며 block 내부에서만 사용하는 모듈로 정의한다. 예를 들어 menu__item은 menu라는 block을 구성하며 menu 밖에서는 사용할 수 없으므로 element가 된다.
그림 – block을 구성하는 element(출처:en.bem.info)
element 클래스 이름도 block과 동일하게 ‘형태’가 아니라 ‘용도’를 나타내야 한다.
element는 선택적 요소이므로 사용하지 않아도 상관없지만 element 이름을 중첩하여 사용하지 않는다.
EX) block__element__element, menu__button__icon (X)
Modifier
block/element의 모양이나 동작을 정의하는 모듈이다.
modifier는 선택적 요소이므로 사용하지 않아도 상관없지만 단독으로는 사용할 수 없고 block/element와 함께 사용해야 한다.
같은 block이라도 modifier에 따라 모양이 변할 수 있으며, modifier는 런타임이나 block에 따라 바뀔 수 있다.
modifier 클래스 이름은 형태(크기, 색, 상태, 동작)을 나타내야 한다. 형태로 나누면 boolean, key-value 두 가지가 있으며, 각각의 예는 다음과 같다.
– boolean : ex) active, disabled
– key-value : ex) color_red, line_doubled (스네이크 케이스로 표현)
modifier의 수는 제한이 없으므로 여러 개를 붙일 수 있지만 동일한 스타일은 중복하지 않는다.
MIX
mix는 하나의 요소에 역할이 다른 여러 클래스를 사용하는 기법이다.
장점은 코드를 복사하지 않고 기존의 스타일과 조합해서 새로운 모듈로 사용할 수 있다.
block+element, block+block, element+element 등의 mix를 사용할 수 있으며, 샘플 코드를 통해 확인할 수 있다.
<!-- HTML -->
<div class="header">
<div class="logo header__logo"></div>
</div>
/* CSS */
.logo {
width:100px;
height:50px;
}
.header__logo {
margin: 12px;
}
다른 요소와 관계된 레이아웃과 관련된 부분은 mix, block 내부의 문제는 modifier를 사용하는 것이 좋다.
mix는 독립성과 재사용성이 높은 상태를 유지하는 장점이 있다.
참고
– https://en.bem.info
– 다양한 예제로 배우는 CSS 설계 실전 가이드