CSS BEM 표기법? 우선 순위?

maketheworldwise·2022년 7월 10일

나의 프론트엔드 개선 기록 🎨

목록 보기

2/3

이 글의 목적?

HTML로 구조 잡는건 사실 어렵진 않은데 CSS로 요소들을 컨트롤할 때 div 요소를 계속 추가하게 되거나 클래스 네이밍 부분에서 많은 삽질이 들어간다. div 요소로 HTML 구조를 잡는건 점차 개선할 수 있는 부분이라고해도, 매번 CSS 파일을 열 때마다 클래스명들이 눈에 계속 밟힌다. 더 효과적으로 네이밍할 수 있는 BEM 표기법과 추가적으로 CSS 조합의 우선 순위에 대해서 정리해보자.

BEM 표기법

BEM은 Block, Element, Modifier의 약자다. CSS Module이나 Styled Component를 더 많이 사용하기에 잘 안쓰인다고는 하지만, 아직까지 해당 내용들을 배우기에는 어려움이 있으니 지금 상황에서 내가 개선할 수 있는 표기법만이라도 숙지해두자.

BEM 표기법을 구글링하여 찾은 가장 이해하기 쉬운 블로그의 예시를 가져와보자.

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

BEM은 Block, Element, Modifier의 약자라고 했고, 이 기준으로 네이밍이 된다. 위의 코드를 따라가보면, header는 Block, navigation은 Element, navi-text는 Modifier를 의미하며, __와 --로 구분된다.

참고한 블로그에 작성된 가장 올바른 BEM 표기법을 보면 쉽게 이해할 수 있다.

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__input"/>
      <button class="search-form__button">Search</button>
  </div>
</form>

Modifier의 경우 Block이나 요소의 속성을 의미한다. 하단의 예시에서는 각 탭에서 다르게 동작하는 경우에 Modifier로 --focused를 붙여 처리한 것을 볼 수 있다.

<ul class="tab">
  <li class="tab__item tab__item--focused">탭 01</li>
  <li class="tab__item">탭 02</li>
  <li class="tab__item">탭 03</li>
</ul>

BEM 표기법 연습하기

블로그의 표기법 연습 내용을 모두 복붙하기보다는, 내가 BEM 표기법을 이해하기에 충분했던 몇 가지만 가져와보자.

전체 구조

여기서는 mozillatab과 nav의 경우 독립적으로 클래스가 지정되어있는데, 이는 다른 곳에서도 재사용하기 위해서 Block으로 지정되어있다.

<div class="header">
  <div class="mozillatab"></div>
  <div class="header__logo"></div>
  <div class="header__auth"></div>
  <div class="nav"></div>
  <div class="header__search"></div>
</div>

로고 구조

로고의 경우 다른 곳에서 재활용할 수 있기에 독립적인 Block으로 지정해두었다. 하단의 내용을 해석해보면, header__logo로 로고의 위치를 잡고 logo는 로고 이미지를 지정하는데 사용하면 된다.

<div class="header__logo">
  <div class="logo">
    <a href="#" class="logo__link">
      <h1 class="blind">MDN</h1>
    </a>
  </div>
</div>

로그인 구조

<div class="auth-means">
  <p class="auth-means__text">Sign in with
  <ul class="auth-means__list">
    <li class="auth-means__item auth-menas__item--persona">
      <a href="#">
        <i class="fa fa-user"></i>
        <span class="blind">Persona</span>
      </a>
    </li>
    <li class="auth-means__item auth-menas__item--github">
      <a href="#">
        <i class="fa fa-github"></i>
        <span class="blind">Github</span>
      </a>
    </li>
  </ul>
</div>

CSS 우선 순위

각 요소들에 클래스명만을 지정하여 스타일링하지 않고 각종 선택자들을 조합하여 CSS를 작성하는 경우도 많다. 조합하는 것 자체는 어렵지 않은데, 우선 순위에서 삽질하는 경우가 대부분인것 같다. 우선 순위 계산 방법은 다음과 같다. (계산된 결과가 클 수록 우선 순위가 높음)

!important : 10000 점
Inline Style : 1000 점
id : 100 점
class : 10점
Tag : 1점

기본적으로 뒤에 나오는 CSS의 우선 순위가 높으며, 만약 우선 순위의 점수가 동일할 경우 개수가 많은 CSS의 우선 순위가 높다. 개인적으로는 매번 코드를 열어서 계산하지 않고, 주석으로 계산된 점수들을 작성해두며 코드를 완성해나가는 것이 좋아보인다.

번외

참고로 최근에 CSS를 SCSS로 옮기면서 SCSS 구조상 BEM 네이밍 방식이 올바르지 않다고 생각했다. 하지만 하단의 문서에서는 BEM 표기법을 SCSS에서도 적용하는 내용을 확인할 수 있었다. 어렵지만 그래도 가능하다면 BEM 표기법을 사용하는 방향으로 진행해보면 좋을 것 같다.