[CSS] CSS방법론 - BEM (Block Element Modifier)

 

block__element--modifier

구조에 맞춰 class를 쓰는 방식.

최대한 단일 클래스로 선택자를 불러와 특이성을 낮춰

!important를 쓰는 일을 줄인다.

---

 

1.구조

1).Block

-독립적인 컴포넌트를 의미

-다른 블록으로 들어갈 수도 있지만 독립적으로도 쓰임

-단어를 조합 시 하이픈으로 연결

-목적에 따라 이름을 정해줄 것

-환경에 따라 영향을 받으면 안됨

 

2).Element

-의존적인 구성요소를 의미

-블록이 있어야 의미를 가지기 때문에 분리해 재사용할 수 없음

-목적에 따라 이름을 정해줄 것

-단어끼리 조합은 하이픈으로 함

-필수 작성 아님

 

3).Modifier

-Block이나 Element의 속성을 의미 (모양, 동작, 상태)

-boolean이나 key-value타입으로 작성함

-필수 작성 아님

 

 

2.사용법

-css 선택자를 쓸 때 다른 block, element에 종속되지 않도록 쓰기

.header-block .header__btn {} // x
.header__btn {} // o

 

-scss와 함께 쓰면 더 간단하게 사용하기가 쉽다.

.block {
  // styles for .block
  &__element {
    // styles for .block__element
    &--modifier {
      // styles for .block__element--modifier
    }
  }
  &--modifier {
    // styles for .block--modifier
  }
}

 

-요소의 일부를 변경해야 할 때 block에다가 말고

  그 element에 대해 새로운 modifier이 붙은 클래스를 추가하는게 더 편하다고 한다. (img, figcaption 참조)

<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>

 

-block의 상태에 따라 하위 요소들이 바뀌는 것이라면 다음과 같이 바꾸면 된다.

<!-- DO THIS -->
<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://en.bem.info/

-https://getbem.com/

-https://css-tricks.com/bem-101/

 

-https://sparkbox.com/foundry/bem_by_example

-https://sparkbox.com/foundry/bem_css_organization

: 알기 쉬운 예제를 통해 오해를 해결하기 좋음

 

-https://en.bem.info/libraries/classic/bem-components/6.0.0/desktop/button/

: bem 클래스명 붙일 때 도움됨

-https://en.bem.info/methodology/naming-convention/#element-modifier-name

: modifier에 대한 세부적인 예시