CSS 방법론 - BEM

대표적인 CSS 방법론으로 OOCSS, BEM, SMACSS 가 있다.
그중 BEM에 대해 간략히 정리해둔다.

BEM

• Block + Element + Modifier = BEM
• ID는 사용하지 않으며, class 만으로 네이밍
• 보여지는게 아닌 목적으로 네이밍
• ex) header__form–email

Block

• 독립적으로 의미 있는 컴포넌트
• ex) wrap, header, footer, nav, main..

<div class="block">...</div>

Element

• 독립적으로 의미 없으며 Block을 구성하는 단위
• ex) wrap, header, footer, nav, main..

<div class="block">
    <input class="element" type="text">
    <button class="element">button</button>
</div>

Modifier

• Block과 Element의 속성을 담당
• 하이픈 ‘–‘을 추가하여 네이밍
• 예로 탭 메뉴의 경우 focusd된 탭을 modifier라고 함.

<div class="block">
    <p class="block__element--error">error message</p>
</div>

.block__element--modifier {
	display: none;
}

정리

• 유지보수 및 코드의 재사용 가능성
• SASS 사용시 부모참조자 (&)와 궁합이 좋음.
• 클래스명으로 마크업 구조를 파악하기 용이하다.
  
  
• 클래스명이 너무 길다.. DOM제어가 필요할 때 스크립트가 너무 길어질 것 같다.
• 하이픈과 언더바가 혼재되어 있어, 더블클릭 시 클래스를 한 번에 선택할 수 없다. (작업 속도에 치명적임)