HTML 클래스 속성의 작명법 BEM

BEM(Block Element Modifier)

• 요소__일부분 : Underscore(Lodash) 기호 2개로 일부분을 표시한다.
• 요소--상태 : Hyphen(Dash) 기호 2개로 요소의 상태를 표시한다. 

예시를 살펴보자.

아래처럼 작성할 경우 2번 요소가 다르지만 똑같은 클래스를 가지고 있다.

<div class="1">
	<div class="2"></div>
    <div class="3">
    	<div class="2"></div>
    </div>
</div>

이러한 문제를 해결하려면 __를 붙어주어야 한다.

<div class="1">
	<div class="1__2"></div>
    <div class="3">
    	<div class="3__2"></div>
    </div>
</div>

이렇게 구별할 수 있다.

또한 아래는 동일한 요소가 세세하게 구분되지 않는다.
이러한 문제를 해결하려면 --를 붙여주면 된다.

<div class="1 2"></div>
<div class="1 3"></div>
<div class="1 4"></div>

--를 붙여주면 아래와 같다.

<div class="1--2"></div>
<div class="1--3"></div>
<div class="1--4"></div>

더욱더 구별이 잘된 모습을 볼 수 있다.