[TIL]CSS 방법론 : BEM

테크야끼·2021년 5월 4일
0

TIL

목록 보기
6/11
post-thumbnail

1. BEM이란?

BEM (Block Element Modifier)이란 CSS 방법론중 하나로 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시하며, 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는것이 목표이다.

2. BEM의 장점

  • 간편한 유지보수
  • 코드의 재사용 가능성
  • 직관적인 네이밍

3. BEM의 규칙

  • 재사용, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만든다.
  • 소문자, 숫자만을 이용해서 작명한다.
  • 여러단어의 조합은 싱글 하이픈(-)으로 연결하여 작명한다.
  • BEM은 오직 class명에만 활용할 수 있다.
  • '어떤 목적인가'에 따라 클래스명을 짓는다.예를 들어, 에러 메시지를 띄우는 P 태그에게는 .red가 아닌, .error라는 클래스명을 준다.

4. BEM의 기본구조

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

위 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier가 된다.

Block

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

  • 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트
    (A functionally independent page component that can be reused)
  • 형태가 아닌 목적에 맞게 작성한다.
  • 블록은 환경에 영향을 받지 않아야 한다. (여백이나 위치를 주지않는다.)
  • 블록끼리 중첩해서 작성 할 수 있다.
  • ex : header, menu, search-form ….

Element

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

  • 블럭이 포함하고 있는 한 조각입니다.
  • 각 요소는 두개의 밑줄표시(__)로 연결하여 블럭 다음에 위치시킨다.
  • 요소는 블록의 부분으로만 사용 할 수 있고, 다른 요소의 부분으로는 사용할 수 없다.
  • 모든 블록에서 요소는 필수가 아니며 선택적으로 사용한다.

Modifier

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

  • 블럭 또는 요소의 속성
  • 요소의 외관이나 상태를 변화시키는 것
  • 블럭 또는 요소 뒤에 더블하이픈(--)으로 연결하여 표시한다.
  • 블럭을 재사용할 때 modifier을 이용해 스타일링을 바꿔줄 수 있다.

Modifier의 boolean type & key-value type

  • boolean type : 수식어의 값이 true 라고 가정한다.
    (ex : form__button — disabled)
  • key-value type : key, value를 하이픈(-)으로 연결하여 성질 - 내용을 표시한다.
    (ex : color-red, theme-ocean)

5. BEM을 사용해보자!

BEM을 이용해 헤더를 마크업해보자!

    <nav id="navBar">
      <div class="navbar__logo">
        <img src="./imgs/favicon.png" alt="logo" />
        <a href="#">Hiko</a>
      </div>
      <ul class="navBar__menu">
        <li class="navBar__menu_item active">Home</li>
        <li class="navBar__menu_item">About</li>
        <li class="navBar__menu_item">Skills</li>
        <li class="navBar__menu_item">My work</li>
        <li class="navBar__menu_item">Testimonial</li>
        <li class="navBar__menu_item">Contact</li>
      </ul>
    </nav>

[참고사이트]
BEM: http://getbem.com/introduction/
BEM 101 by CSS-Tricks: https://css-tricks.com/bem-101/

0개의 댓글