BEM의 기본 구조

  • BEM은 Block, Element, Modifier를 뜻한다.

  • BEM은 어떤 목적인가에 따라 이름을 만든다.

  • Blcok, Element, Modifier은  _ _ 와 - - 로 구분한다.

  • 이름을 연결할때에는 -를 사용한다.

    .header__navigation--navi-text {
  color: red;
}

    header는 Block, naviagtion은 Element, navi-text는 Modifier가 됩니다.


Block

  • 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트을 Block이라고 부른다.

  • 또, Block은 Block으로 감쌀 수 있습니다.


Element

  • Element는 Block을 구성하는 단위이다.

  • Block은 독립적인 형태인 반면, Element는 의존적인 형태이다.

  • 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다.

    <form class="search-form">
  <input class="search-form__input" />
  <button class="search-form__button">Search</button>
</form>

    .search-form은 Block이, .search-form__input과 .search-form__button은 Element이다.


Modifier

  • Modifier는 Block이나 Element의 속성을 담당한다.

  • 생긴 게 조금 다르거나, 다르게 동작하는 Block이나 Element를 만들 때 사용하면 됩니다.

    <ul class="tab">
  <li class="tab__item tab__item--focused">탭 01</li>
  <li class="tab__item">탭 02</li>
  <li class="tab__item">탭 03</li>
</ul>

    —focused가 Modifier에 해당한다


BEM 장점

  1. 클래스네임만으로 마크업 구조를 알 수 있다.
  2. SASS의 부모참조자(&)를 사용하기 쉬워진다.
  3. 작성된 SASS 에서 요소를 쉽게 찾을 수 있다.
  4. SASS 작성 시, 늘어지는 셀렉팅을 막아준다.

BEM 단점

  1. 클래스네임이 너무 길다.
  2. 더블클릭 선택이 불편하다.