BEM 효과적으로 사용하기 : modifier를 사용하는 기준

버튼이 두 개 있다. 둘 다 background color와 border를 제외하고는 같은 스타일을 가진다. 이 때 각자 버튼에 대한 스타일을 따로 작성하는 것보다는 중복되는 스타일을 빼서 작업하는 것이 좋을 것이다.

따라서 bem의 modifier를 사용해서 이 둘의 공통적인 부분을 사용하도록 했다.

.auth-noti__auth {
  height: 2.25em;
  border-radius: 3em;
  padding: 0.5em 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  color: white;
  font-weight: 700;
  overflow: auto;
  cursor: pointer;
  word-break: break-word;

  border: 1px solid $normal-blue;
  background-color: $normal-blue;
}

.auth-noti__reject {
  height: 2.25em;
  border-radius: 3em;
  padding: 0.5em 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  color: white;
  font-weight: 700;
  overflow: auto;
  cursor: pointer;
  word-break: break-word;

  border: 1px solid $deep-gray;
	background-color: $deep-gray;
}

.auth-noti__btn {
  height: 2.25em;
  border-radius: 3em;
  padding: 0.5em 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  color: white;
  font-weight: 700;
  overflow: auto;
  cursor: pointer;
  word-break: break-word;
  &--auth {
    border: 1px solid $normal-blue;
    background-color: $normal-blue;
  }
  &--reject {
    border: 1px solid $deep-gray;
    background-color: $deep-gray;
  }
}

<div class="auth-noti__btns">
  <div class="auth-noti__btn auth-noti__btn--auth">  // class가 2개가 생기는데...
    권한 부여
  </div>
  <div class="auth-noti__btn auth-noti__btn--reject">거절</div>
</div>

이렇게 사용하다 보면 클래스가 두 개가 주어지는데 캐스케이딩 점수가 올라가서 좋지 않은 게 아닌지 의문이 들었다.

다음은 지섭님의 대답

modifier와 mixin 둘 다 사용할 수 있는 상황 같아요. 물론 그래도 둘 중에 하나를 선택하라고 하면 mixin 을 선택하겠습니다. 이유는

• 중복제거 용도로 쓰면 auth-noti__btn auth-noti__btn--xxx 와 같은 형태로 계속 같이 쓰게 유도되어 클래스 네임 열거가 더 길어지고(애초에 BEM 이 좀 길긴 하지만)
• Modifier 는 하위 요소나 type 을 나타내기 보다 기존 Element 의 특정 외형, 상태, 동작 등을 나타낼 때 아래와 같은 형태로 주로 쓰여요.
  1. boolean-disabled, -selected, -highlighted, -focused
  2. key-value-color-red, -size-m, -theme-dark, -direction-left

따라서 위의 코드를 믹스인을 사용한 방식으로 변경해 본다.

// assets/scss/my-page.scss

@mixin auth-noti__btn {
  height: 2.25em;
  border-radius: 3em;
  padding: 0.5em 1em;
  margin-right: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  color: white;
  font-weight: 700;
  overflow: auto;
  cursor: pointer;
  word-break: break-word;
}

// nuxt.config.js

styleResources: {
	scss: [ ..., '@/assets/scss/my-page.scss',],
}

// component 안
.auth-noti__auth {
	@include auth-noti__btn;
  border: 1px solid $normal-blue;
  background-color: $normal-blue;
}

.auth-noti__reject {
  @include auth-noti__btn;
  border: 1px solid $deep-gray;
  background-color: $deep-gray;
}

<div class="auth-noti__btns">
  <div class="auth-noti__auth">권한 부여</div>
  <div class="auth-noti__reject">거절</div>
</div>

더 깔끔하게 작성할 수 있게 되었다.