BEM 명명규칙(CSS class)

B(Block)

기본 하나의 아이템(component, box..)를 나타낸다.

- 을 이용

.info-box { }

E(Elements)

아이템(component, box..)를 이루고 있는 요소(element)를 표현할 때 사용한다.
아이템(component, box..) 이름 뒤에 2개의 밑줄 __ 을 사용하여 명명한다.

.info-box__title {}
.info-box__contents {}

 

M(Modifier)

수정(Modifier)을 나타내는데 해당 아이템으로부터 기존의 속성에서 변경해서 사용하고 싶을때이다.
component를 수정한다는 의미로, component명 뒤에 -- 를 사용하여 명명한다.

info-box--blue {}