💡BEM (Block Element Modifier)

HTML CLASS속성의 작명을 할 때 통용적으로 사용되는 표기법에 대해 알아봅시다.

---

💛__(dobble underscore) (class="name__name")

"상위요소__하위요소" 의 구성으로 클래스명을 작성하여
중복된 클래스명의 사용을 최소화하며 클래스명만 읽어도 요소의 용도를 파악할 수 있도록 함

• BEM을 사용하지 않은 Class Name

	<div class="container">
      <div class="title"></div>
      <div class="item">
      	<div class="title"></div>
      </div>
	</div>

• BEM을 사용한 Class Name

	<div class="container">
      <div class="container__title"></div>
      <div class="item">
      	<div class="item__title"></div>
      </div>
	</div>

위와같이 'title'이라는 클래스명이 반복적으로 사용 될 때 __(underscore)로 포함관계를 표기하여 직관적이고 가독성이 높은 작명이 가능하게 됨.

---

💛--(dobble dash) (class="name--name")

"요소--요소상태" 의 구성으로 클래스명을 작성하여
연속된(관련된) 클래스명들이 별개의 상태로 보이지 않도록 통일성을 부여함

• BEM을 사용하지 않은 Class Name

	<div class="btn play">Play</div>
	<div class="btn pause">Pause</div>
	<div class="btn stop">Stop</div>

• BEM을 사용한 Class Name

	<div class="btn btn--play">Play</div>
	<div class="btn btn--pause">Pause</div>
	<div class="btn btn--stop">Stop</div>

위와같이 'btn'과 'play'라는 연속된 클래스명이 서로 상관관계가 있는 경우 --(dash)기호를 통해 해당요소의 상태를 가리키는 클래스명임을 확실하게 표기할 수 있음.

---

마치며🙌

구글링이나 강의를 통해 공부를 하며 BEM표기법으로 작성 된 클래스명을 마주할 때가 많았음에도 불구하고 깊게 생각해 본 적이 없는 부분이였다. 단순히 어느 개발자만의 규칙이겠거니 하고 넘겼는데 개발자들 사이에서 통용되는 클래스명 작성법이였다는 것!...

확실히 가독성이 조금 더 생기고 전문적으로 보여서 멋도 있는듯..? 🤔