BEM - CSS,JS 용 클래스 네이밍 규칙

처음 HTML, CSS 를 사용하려고 하다 보면, 각 태그들을 구별할 뚜렷한 클래스 명명 규칙을 찾기 어려워 멋대로 지정해보다가, 프로젝트의 규모가 커지면서 답답함을 느끼게 된다.

 

선대 개발자들은 이런 문제를 해결하기 위한 고민을 이미 진행해왔으니, 이를 알아보자.

태그 위주로 이름 짓기

태그를 기준으로 클래스를 네이밍해보자.

article { /* ... */ } 
article aside { /* ... */ } 
article aside figure { /* ... */ }
article div header { /* ... */ } 
article ul li { /* ... */ } 
article div ul li { /* ... */ } 
article div ul li.special { /* ... */ } 
/* ... */

• 장황한 선택자
• CSS 선택자만으로 요소를 정확히 식별하기 어렵다.
  • 이게 우리 웹 사이트에서 어떤 의미지?
• 위치와 태그가 같지만 종류가 다를 경우도 있을 수 있다.

클래스 위주로 이름 짓기

이번엔 클래스 위주로 이름을 지어보자.

.card { /* ... */ }
.card .thumb { /* ... */ }
.card .thumb .image { /* ... */ } 
.card .body .title { /* ... */ } 
.card .body .list { /* ... */ } 
.card .body .list .list-item { /* ... */ } 
.card .body .list .list-item.special { /* ... */ }

• 이제 각 요소가 어떤 역할로 사용되는지는 표기할 수 있게 되었다.
  • card
  • thumb
  • image
• 하지만, 여전히(혹은 더욱) 장황해졌다.
  • 일단 선택자의 길이가 더 길어졌다.
• 종속 관계 명시가 없으면, 클래스가 중복될 수 있다.

---

이와 같은 문제를 해결하기 위해, 어느정도 "잘 정돈된" 규칙을 만들었다.
그게 BEM(Block-Element-Modifier)이다.

BEM(Block-Element-Modifier)

• 기본적으로 띄어쓰기는 대시(-)로 표현한다.
• BEM은 사이트의 요소를 일정 부분의 컴포넌트로 나눠서 하나의 블록으로 지정한다.
  • 현재 예시에선 카드가 하나의 블록이 된다.
• 컴포넌트 내 요소가 있다면, 요소의 중첩을 무시하고 하나의 Element로 지정한다.
  • card__thumb
  • card__image
  • card__title
• 만약 Element 내 특별한 요소가 있다면, 기존 element 뒤에 --modifier를 붙인다.

.card { /* ... */ } 
.card__thumb { /* ... */ } 
.card__image { /* ... */ } 
.card__title { /* ... */ } 
.card__list { /* ... */ } 
.card__list-item { /* ... */ } 
.card__list-item--special { /* ... */ }

• 간결해진 선택자 - 코드량 감소
• 명확한 선택자 - 중복 문제 해소
• 높은 가독성, 이해하기 쉬운 구조

BEM 방식이 항상 정답은 아니다.
대부분의 경우에는 BEM 방식이 좋을 뿐이다.

직접 BEM 예제를 다뤄보고 싶다면, 다음 튜토리얼을 진행해보자.
https://en.bem.info/methodology/quick-start/

Quick start / Methodology / BEM

 

• 참고: 얄팍한 코딩사전