• CSS 클래스의 이름을 시스템적으로 구성하여 스타일의 재사용성을 높이고, 코드의 가독성을 높이며, Selector간의 충돌을 방지하는 것을 목표로 한다
• Block, Element, Modifier의 약자로 구성되어 있으며, 역할은 아래와 같다
  • Block : 독립적인 컴포넌트, 웹 페이지의 구성 요소, ex) header, menu 등
  • Element : 블록 내 일부로 기능하는 요소, ex) menu item, list item 등
  • Modifier : Block 또는 Element를 변형시키는 속성, ex) disabled, hishlighted 등

명명 규칙

• 기본 형식은 Block__Element—Modifier
• 더블 언더바는 Block과 Element를 구분, 더블 대시는 Modifier를 나타낸다

<!-- 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로 지정하게 된다