HTML 클래스 속성 작명 BEM

BEM이란 Block Element Modifier의 약칭으로 

html 의 요소에 클래스 속성을 부여할 때 그 이름을 지어주는 규칙을 말한다.

 

요소__일부분 (underscore 2개 사용)

요소--상태 (hyphen 2개 사용)

형태가 있는데 

 

예를 들어

<div class="contianer">
	<div class="name"></div><!-- 1번 name-->
    <div class="item">
    	<div class="name"></div><!-- 2번 name-->
    </div>
</div>

이러한 형태의 코드가 작성되어 있다고 할 때, 

container 라는 클래스를 가진 요소의 자식으로 name(1번), item 클래스를 가진 요소들이 있고 item 클래스의 요소는 다시 name(2번)이라는 클래스를 가진 자식 요소가 있다.

 

css에서 container 의 자식요소인 name(1번)을 지정하고자 할 때

.container .name{
}

위와 같이 사용하는 경우가 많은데 

이런 경우 item의 자식 요소인 name(2번) 까지 지정되어 불편할 수 있다.

 

이런 경우 각각의 요소를 정확하게 지칭하기 위해서 해당 요소를 포함하고 있는 요소 즉, 부모 요소의 클래스명을 앞에 써 주고 __ underscore 2개를 입력한 후 해당 요소의 클래스명을 입력한다. 

 

<div class="contianer">
	<div class="container__name"></div>
    <div class="item">
    	<div class="item__name"></div>
    </div>
</div>

이런 식으로 변경하면 중복되던 name이라는 클래스가 어느 요소에 속해 있는지 명확하게 확인되어 편할 수 있다.

 

여기까지는 요소들간의 관계를 통해 해당 클래스명을 가진 요소가 어느 요소의 일부분인지를 나타내는 방법이었다.

 

<div class="btn primary"></div>
<div class="btn success"></div>

다음은 이러한 코드가 있다고 하자

각 버튼들의 상태를 다르게 표현하기 위해 다른 클래스들을 부여하는데 

해당 코드에서는 primary, success 등의 클래스명이 버튼과 관련되어 있다는 것을 파악하기 어렵다.

 

<div class="btn btn--primary"></div>
<div class="btn btn--success"></div>

이런 식으로 작성할 경우 클래스명만 보고도 버튼의 상태를 구분하기 위한 클래스명임을 확인할 수 있다.

 

정리하자면

단어1__단어2 : underscore 2개를 중간에 붙이는 경우 단어2가 단어1의 일부분이고 

단어1--단어2 : hyphen 2개를 중간의 붙이는 경우 단어2가 단어1의 상태를 나타낸다.