설계 기법 3 - BEM

Ye Seo Lee·2022년 12월 14일

CSS 설계 가이드

CSS 설계

목록 보기

4/5

BEM

Block, Element, Modifier의 약자
사용자 인터페이스를 독립된 블록으로 분리하여,
복잡한 페이지도 간단하고 신속하게 개발하는 것이 목적

1. 공통 기본 규칙

클래스 셀렉터 사용 (id 사용X)
상세도는 균일하게 유지한다. (요소형 X, 더블 클래스 명시 X)
이름 규칙
어떤 목적으로 사용하는지를 의미하는 이름 (이 Element는 menu의 item이다, 에러발생 등)
형태나 위치, 모양을 나타내는 이름 X
ex) red-text, menu__bold(X), error(O)
- 영소문자
- Element, Modifier는 각각 Block 이름 상속
- 각 항목의 구분 안에 여러 단어 있는 경우 구분 : 하이픈(-) 케이스
  (경우에 따라서는 캐멀 케이스 스타일로 하는 경우도 있다.)
- Block과 Element 구분에는 언더스코어 두 개(__)
- Modifier의 키/값 구분에는 언더스코어 한 개(_)
리액트 스타일 이름 규칙
- Block과 Element는 어퍼 캐멀 케이스, 하이픈(-) 한 개로 구분
- Modifier는 로워 캐멀 케이스로 기재
  ex) BlockName-ElemName_modeName-modVal
TIP!!
- DOM 모델이 아니라 Block이라는 단위를 베이스로 사고한다.
- ID와 요소형 셀렉터는 사용하지 않는다.
- 자녀(손자) 셀렉터에서 중첩되는 셀렉터 수는 가급적 적게한다.
- 이름 규칙을 확실히 따라 클래스 이름을 붙인다.(이름 충돌 피하기 위함)
- Block, Element, Modifier 중에 어떤건지 항상 인식한다.
- Block/Element에서 변경이 빈번하게 일어날 것으로 예상되는 스타일 속성은 Modifier로 옮겨둔다.
- Mix를 적극적으로 사용한다.
- 관리성을 높이기 위해 각각의 Block은 작은 크기로 분할한다.
- Block을 적극적으로 재사용한다.

2. Block

논리적이고 기능적으로 독립한 페이지 모듈
특정 콘텍스트에 의존하지 않으며 어디에서도 재사용할 수 있는 부품
레이아웃에 관한 스타일링 X
-> position, float, margin 등 지정하면 안됨 (Mix기법 사용권장)
이름 규칙 : 영소문자 + 하이픈(-)
ex) menu, global-nav
Block 중첩 가능 : 중첩의 수에 제한은 없다.
but, 중첩에 의한 Block간의 자식 셀렉터 사용이 많아지면 상세도가 높아진다.
-> Mix 기법으로 해결

3. Element

반드시 Block 안에 배치한다.
-> Block을 구성하는 선택적 요소
-> Block 외부에서는 독립해서 사용할 수 없는 부품
-> Block에 Element는 없어도 괜찮다.

// 각각 독립된 Block으로 이루어진 Block
// 모든 Block이 Element를 갖고 있지 않음
<div class="search-from">
  <input class="input">
  <button class="button">Search</button>
</div>

이름 규칙 : block이름 상속 + 언더스코어 2개(__) + 하이픈(-)
ex) menu__item, global-nav__link-item
Element안에 Element가 중첩(nest)된 이름 사용 X
ex) menu__item__link(X), menu__item, menu__link(O)
- block 안에서 element가 이동하는 경우가 있다.
- 몇가지 element가 없는 상태에서 사용되는 경우가 있다.
- element를 뒤에서 추가하는 경우가 있다.
Element 수가 많을 경우, 특정 Element를 Block으로 상속시켜 복잡성을 줄인다.

4. Modifier

Block 혹은 Element의 모습, 상태, 움직임을 정의하는 선택적인 요소
단독 사용 불가X
이름 규칙 : Block/Element 클래스 + 언더스코어(_) + Modifier 이름(키-값/불값 규칙)
ex) block-name__element-name_moditier-name
키-값 규칙 : 언더스코어(_)
- 형태 (크기, 색, 테마 등) : size_s, theme_caution, text_large, color-theme_caution
- 움직임 (어떤 형태로의 움직임) : directions_rignt-to-left, position-bottom-right
불값 규칙 : 한 단어로 완결
- 상태 (다른 점) : disabled, focused, actived

5. Mix

단일한 Dom 노드에 다른 여러 BEM 엔티티를 추가한 인스턴스
하나의 HTML 요소에 역할이 다른 여러 클래스가 붙어 있는 상태
이름 규칙 : B/E클래스 + 더블언더스코어(__) + B/E클래스
코드를 복제하지 않고도 여러 BEM 엔티티의 동작이나 스타일을 조합한다.
- 가급적 상세도를 높이지 않는다.
- Block의 재사용성을 높인다.
- Block의 독립성을 유지한다.
기존 BEM 엔티티로부터 새로운 모듈을 만든다.
그룹 셀렉터 대신 Mix 사용
- 처음부터 그룹 셀렉터 사용 X
- Mix도 무리해서 사용 X
  -> 각각에 덮어쓰기가 발생할 경우 처음부터 구분을 한다.
- Mix가 필요한 경우, 한 Block의 Modifier에서 Mix의 덮어쓰기 수행
Mix로 처리할 수 없는 경우 (Element 안에 다른 Block 중첩)
-> __inner라는 Element를 새로 만들고 그 안에 다른 Block 중첩
Modifier 이름 생략 X
- 이름 충돌로 인해 상세도가 늘어난다.
- 어떤 클래스에 대한 Modifier인지 구분 X
- 코드 검색이 어렵다.