CSS 방법론 BEM 방식

1. BEM이란?

• Block Element Modifier를 뜻함
• 위 세가지로 구성된 이름을 짓는 것으로 __와 --로 구분함

 

.status__column--text{
	color: blue;
}

위 코드에서 예제에서는

• status는 Block
• column은 Element
• text는 Modifier

 

BEM 원칙

• ID를 사용하지 않고 class만을 사용
• 어떻게 보이는가가 아닌, 어떠한 목적인가에 따라 이름을 지음

 

장점

• 클래스네임만으로 구조를 파악 할 수 있음
• 작성된 CSS에서 용소를 쉽게 찾을 수 잇음
• 늘어지는 셀렉팅을 막아줌

 

단점

• 클래스네임이 길어짐

 

 

BEM 공식사이트 

getbem.com/naming/