BEM 방법론, SASS와 SCSS

1. BEM 네이밍 :

Block(블록), Element(요소), Modifier(수정자)를 기준으로 작성한다.  BEM의 가장 큰 특징은 ID를 절대 사용하지 않는다는 것이다.

BEM의 장점은 목적과 기능을 명확히 전달하며 요소의 구조를 효율적으로 전달한다.

1) Block (블록)

block(블록)은 페이지 전체 Element(요소)를 의미하거나 하위 Element(요소)를 감싸는 컨테이너를 의미한다. 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다.

Naming 문자, 숫자, 대시(-)로 구성될 수 있다. ex)

<div class="list-container">
  ...
</div>

2) Element (요소)

블록의 하위 요소이다. 모든 요소는 상위 블록과 연결된다.

Naming 문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다. 블록이름__요소이름의 형태로 작성한다

<div class="wrapper">
  <div class="wrapper__item"></div>
</div>

3) Modifier (수정자)

Naming 수정자의 이름은 문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다. 블럭이름--수정자이름 혹은 요소이름--수정자이름 형태로 작성한다. 수정자의 이름이 길거나 공백이 있다면 하나의 대시를 사용한다. 블럭이름--border-black. 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다.

 

<div class="block block--size-big">
  <div class="block__elem block__elem--mod"></div>
</div>
<div class="box box--size-small">
  <div class="box__elem box__elem--border-red"></div>
</div>

 

4) 예시

<!-- DO THIS -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style>
  .photo { } /* 특이성 10 */
  .photo__img { } /* 특이성 10 */
  .photo__caption { } /* 특이성 10 */
</style>

<!-- DON'T DO THIS / 이렇게 하지 마세요 -->
<figure class="photo">
  <img src="me.jpg">
  <figcaption>Look at me!</figcaption>
</figure>

<style>
  .photo { } /* 특이성 10 */
  .photo img { } /* 특이성 11 */
  .photo figcaption { } /* 특이성 11 */
</style>

 BEM 클래스 이름은 오직 기본 블록 이름과 하나의 요소 이름만 허용한다. 아래 예시에서 photo__caption__quote는 BEM을 잘못 사용한 것으로 photo__quote가 더 적합하다.

<!-- DO THIS -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__quote">
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style>
  .photo { }
  .photo__img { }
  .photo__caption { }
  .photo__quote { }
</style>


<!-- DON'T DO THIS / 이렇게 하지 마세요 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__caption__quote"> <!-- 클래스 이름에 여러 하위 요소(또는 구조)를 명명하지 말 것 -->
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style>
  .photo { }
  .photo__img { }
  .photo__caption { }
  .photo__caption__quote { } /* 역자 주: 초심자의 가장 흔한 실수다 */
</style>

변경자가 있는 요소

<figure class="photo">
  <img class="photo__img photo__img--framed" src="me.jpg">
  <figcaption class="photo__caption photo__caption--large">Look at me!</figcaption>
</figure>

<style>
  .photo__img--framed {
    /* incremental style changes */
  }
  .photo__caption--large {
    /* incremental style changes */
  }
</style>

구성 요소 변경자 기반으로 하위 요소 스타일 처리

동일한 구성 요소의 하위 요소를 동일한 방식으로 일관성 있게 수정하려면 기본 구성 요소에 변경자를 추가하고 하나의 변경자를 기반으로 각 하위 요소 스타일을 처리한다. 이렇게 하면 특이성이 높아지지만 구성 요소 수정이 훨씬 수월해진다.

<!-- DO THIS / 역자 주 / BEM이 선택자 중첩을 금지하는 건 아니다. 다만 지금보다 중첩이 더 깊어지면 곤란하다. -->
<figure class="photo photo--highlighted">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style>
  .photo--highlighted .photo__img { }
  .photo--highlighted .photo__caption { }
</style>

<!-- DON'T DO THIS / 이렇게 하지 마세요 -->
<figure class="photo">
  <img class="photo__img photo__img--highlighted" src="me.jpg">
  <figcaption class="photo__caption photo__caption--highlighted">Look at me!</figcaption>
</figure>

<style>
  .photo__img--highlighted { }
  .photo__caption--highlighted { }
</style>

 

참고 : https://naradesign.github.io/bem-by-example.html

예제로 이해하는 BEM.