• CSS 클래스 이름을 규칙적으로 구성해 재사용성과 가독성을 높이고, Selector 간 충돌을 막는 것이 목표임
• Block, Element, Modifier의 약자이며, 역할은 아래와 같음
  • Block : 독립적인 컴포넌트, 페이지의 구성 요소, ex) header, menu
  • Element : Block 안에서만 의미를 갖는 부분, ex) menu item, list item
  • Modifier : Block 또는 Element의 상태나 변형, ex) disabled, highlighted
• CSS에 스코프가 없다는 문제를 이름 규칙으로 푼 방식임, CSS Modules나 CSS-in-JS처럼 도구가 스코프를 보장하면 BEM을 쓸 이유는 줄어듦
• 다만 전역 CSS를 쓰는 레거시나 디자인 시스템의 클래스 네이밍엔 여전히 유효함

명명 규칙

• 기본 형식은 Block__Element--Modifier
• 더블 언더바는 Block과 Element를 구분, 더블 대시는 Modifier를 나타냄
• Element는 한 단계까지만 둠, Block__El1__El2 처럼 중첩을 늘리면 구조를 바꿀 때마다 이름을 전부 고쳐야 함

<!-- Block: 'card' -->
<div class="card">

  <!-- Element: 'card__title' -->
  <h2 class="card__title">Card Title</h2>
  
  <!-- Element: 'card__text' -->
  <p class="card__text">Some quick example text to build on the card title.</p>
  
  <!-- Element, Modifer: 'card__button--primary' -->
  <button class="card__button card__button--primary">Go somewhere</button>
</div>

요소 구분

• Block과 Element를 구분하는 예시 그림, 네비게이션엔 탭이 들어가므로 네비를 Block으로, 탭을 Element로 지정함
• 판단 기준은 혼자 떼어내도 말이 되는가임, 떼어내도 되면 Block, 부모가 있어야 의미가 생기면 Element임