CSS의 BEM이란?

 

BEM은 front-end 개발 시 권장되는 일종의 naming method(작명 방법론)다.

BEM을 도입해 CSS class 이름을 체계적으로 작성하면, 가독성 및 유지보수에서 이득을 얻을 수 있다.

---

1. 개요

분야를 막론하고 설계, 디자인에 있어 다양한 방법론과 관례가 존재한다.

각각의 방법론에는 장단점이 있으며, 이로 인해 개인 및 팀에 따라 선호도가 있다.

그러나 모든 방법론들이 추구하는 바는, 협업 및 유지보수에 있어 이점을 얻기 위해서일 것이다.

 

BEM 또한 마찬가지다.

CSS에서 BEM은 일종의 Naming Convention으로, CSS class이름을 짓는 규칙이다.

BEM에 입각한 CSS class명은 그 자체만으로 해당 class의 목적과 기능을 유추할 수 있게 된다.

때문에 프로젝트의 규모가 클수록 높은 재사용성과 효율적인 관리가 가능하다.

 

2. 사용

BEM은 Block, Element, Modifier의 약자다.

이름에서 추측할 수 있듯이, BEM의 네이밍 규칙은 Block, Element, Modifier 요소를 class명 작명에 사용한다.

이 때 Block → Element → Modifier 순으로 네이밍한다.

 

네이밍 규칙은 여러 종류가 있으나 본 포스팅에서는 대표적인 방법 한 가지를 간략히 소개하고자 한다.

block-name__elem-name_mod-name_mod-val

 

 

Block은 재사용 가능한 독립적 블록으로 가장 바깥쪽 상위요소다. Block 이름은 색상이나 크기 등을 묘사하는 이름이 아니라 구조적으로 의미 있는 이름을 사용한다.

 

Element는 블록 내부에 종속되어 실제 기능을 담당하는 부분으로, Block과 Element의 이름 사이는 double underscore(__)로 구분짓는다.

 

Modifier는 Block이나 Element의 속성으로 이들과 Modifier는 single underscore(_)로 구분짓는다.

 

 

이 밖에도 Two Dashes style 등 다른 방식의 Naming 규칙이 존재한다. 코드 예시를 살펴보면 다음과 같다.

block-name__elem-name--mod-name--mod-val

---

더 자세히 알아보기

https://en.bem.info/methodology/

 

 

 

 

-학습을 진행하며 남기는 지식 포스팅-

 

-부족한 설명이 있다면 부디 조언 부탁드립니다-

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다