HTML, CSS (BEM)

BEM이란?

BEM(Block Element and Modifiers)은 클래스 이름을 짓는 규칙을 의미합니다.

좀더 쉽게 읽히는 CSS를 사용하기 위해 만들어진 규칙입니다.

🤔그렇다면 정확히 어떤 규칙을 의미하는것 일까요?

이름에서 볼 수 있듯이 Block과 Element, Modifiers로 이루어진 이름을 짓는 규칙입니다.

Block, Element, Modifiers로 이루어진 이름이라... 잘 감이 오지 않습니다.

우선 간단한 예제를 통해 알아보겠습니다.

<style>
  <!--blcok-->
  .btn {}

  <!--Element : block에 속한 하위 element-->
  .btn__text {}

  <!--Modifiers : block에 속성을 부여하는 의미-->
  .btn--big {}
  .btn--blue {}
</style>

<button class="btn btn--big btn--blue">
  <span class="btn__text">
  </span>
</button>

약간 예제를 보니 감이 오지 않나요?

• 상위 블록은 평소대로 이름을 작성한다.

• 상위 블록에 속하는 하위 element는 상위블록이름__element이름으로 표현한다.

• 상위 블록의 속성들은 상위블록이름--modifiers이름으로 표현한다.

간단하게 이렇게 정리할 수 있습니다.

세부적인 규칙

위에서 전체적인 BEM의 규칙을 살펴봤습니다.

그런데 이외에도 세부적으로 알아야할 규칙들이 있습니다.

1. 상위 블록의 하위 element는 모두 상위 블록의 하위 element로 작성한다.

이게 무슨말인가 싶기도 합니다.

예제를 보면 좀 더 쉽게 이해할 수 있습니다.

<div class="first-block">
  <div class="first-block__first-element">
    <!--<div class="first-block__first-element__second-element> ==> 틀린 표현입니다.-->
    <div class="first-block__second-element">
    </div>
  </div>
</div>

이처럼 상위 블록 내의 하위 element의 depth level이 다르더라도 모두 상위 블록의 직계 하위 element처럼 표현합니다.

---

2. 상위 블록의 내부에 정의된 class라도 상위 블록과 연관이 없다면 element(__)로 표현하지 않는다.

<div class="header">
  <div class="header__inner">
    <div class="tabzilla"></div>
    <div class="header__logo"></div>
    <div class="nav"></div>
    <div class="header__search"></div>
  </div>
</div>

모두 상위 block인 header에 묶인 element들입니다.

하지만 중간중간 tabzilla, nav가 눈에 띄네요

이들은 다른곳에도 쓰이는 component CSS라서 element가 아닌 block으로 취급하는것 같습니다.

이처럼 BEM을 사용하면

1. 클래스의 이름만으로 구조와 역할을 파악할 수 있습니다.

2. 검색과 유지보수가 쉬워집니다.

3. 중복으로 사용되는 .div, .header, .main등을 구분하지 않고 유니크한 클래스명으로 style을 작성할 수 있습니다.

하지만 단점도 존재합니다.

1. .btn 하나를 .btn--color, .btn--size등으로 나누면 관리할 내용들이 많아집니다.

2. .first-block__second-element 같이 클래스명이 매우 길어집니다.

https://nykim.work/15 ==> BEM에 대해 정말 잘 정리된 블로그입니다!