CSS BEM 네이밍 기법 사용하기

BEM 네이밍 기법 특징

1. 의미론 작명법으로 읽고 이해하기 쉽다.

2. 생소한 이름에 약어를 사용하지 않는다.

3. 특이성을 낮게 '020' 이하로 유지한다. (중첩 클래스, id 사용 남발 X)

4. 선택자 이름은 전역에서 유일하다.

5. HTML/CSS 병렬 개발 가능

 

 

예시 html

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item">
      <a href="#" class="menu__link">Home</a>
    </li>
    <li class="menu__item menu__item--active">
      <a href="#" class="menu__link">About</a>
    </li>
    <li class="menu__item">
      <a href="#" class="menu__link">Services</a>
    </li>
  </ul>
</nav>

 

예시 CSS

.menu {
  // 블록 스타일
  background-color: #f0f0f0;
  // 블록 내의 요소들의 스타일
  &__list {
    padding: 0;
    list-style: none;
  }

  &__item {
    display: inline-block;
    margin-right: 10px;

    &--active {
      font-weight: bold;
      // 활성 아이템 스타일
    }
  }

  &__link {
    text-decoration: none;
    color: #333;

    &:hover {
      color: #ff0000;
      // 링크에 호버 효과
    }
  }
}

 

 

 

BEM도 많이 쓰지만 최근에는 tailwindcss를 주로 쓰는데, 소규모 팀 또는 단일 엔지니어 개발에 적합하다고 하는데 나도 그렇게 생각한다.

빨리 빨리 개발하기에는 tailwind만한 것이 없는 것 같다 ㅎㅎ 

 

 

 

출처 : The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명