CSS 방법론 : BEM 방식

BEM은 CSS 작성을 위한 네이밍 컨벤션

Block  Element  Modifier

 

💡 BEM 방법론은 대규모 프로젝트에서 CSS의 구조를 더욱 명확하게 만들고, 이해하기 쉽게 도와주는 방법

 

🌈 사용시 효과

CSS 클래스 이름 충돌을 최소화하고 코드 가독성을 향상시킨다.

 

 

BEM의 세가지 주요 구성 요소

BEM은 이름에서 알 수 있듯이 세 가지 주요 구성 요소로 나누어진다.

 

Block

재사용 가능한 독립적인 페이지 구성 요소(예: 헤더, 컨테이너, 메뉴 등)

ex) menu__logo

 

Element

블록 내부의 부분으로서 그 자체로는 의미가 없으며 블록의 일부로만 사용(예: 메뉴 항목, 헤더 로고 등)

ex) menu__logo

 

Modifier

블록이나 요소의 모양, 상태 등을 변화시키는 속성(예: 활성 상태, 비활성 상태 등)

ex) login__title--warning 

 

사용법

<section class="block__element--modifier">
	Block__Element--Modifier
</section>

.block__element--modifier{

}

 

"__" (두 개의 밑줄)은 Element를 나타내며

"--" (두 개의 하이픈)은 Modifier를 나타낸다.

 

예시

메인 메뉴라는 블록 내에 "메뉴 아이템" 요소(element)가 있고 이 아이템에 "활성상태"라는 수정자(modifier)가 있다면 다음과 같이 표현할 수 있다.

.main-menu__item--active