SCSS 활용 팁 6. 참조 선택자 "&"을 활용하여 BEM 방법론에 따라 클래스 네이밍하기

 

참조선택자(Parent Selector) & 

SCSS에서 &는 현재 선택자를 참조하는 기능입니다. 

/* SCSS */

.button {
  color: white;

  &:hover {
    background-color: blue; // .button:hover
  }

  &--primary {
    background-color: green; // .button--primary
  }
}

/* CSS */

.button {
  color: white;
}

.button:hover {
  background-color: blue;
}

.button--primary {
  background-color: green;
}

예시와 같이 중첩된 상태에서 현재 선택자를 대신해서 사용되며, 코드를 깔끔하게 재사용 할 수 있도록 도와줍니다.

 

BEM 방법론 

BEM은 css 클래스 네이밍을 체계적으로 하기 위해 사용하며, 스타일 충돌을 줄이고 유지보수성을 크게 향상시킬 수 있어 협업에도 활용하기 좋은 방법론입니다. BEM은 컴포넌트를 특정 역할을 하는 블록(Block), 엘리먼트(Element), 모디파이어(Modifier)로 나누고, 클래스 이름 규칙을 통해 구조를 명확히 표현합니다. 

• Block(블록): 독립적인 UI 구성 요소로 헤더, 버튼, 카드 등의 요소
• Element(엘리먼트): 블록에 종속된 하위 요소. 헤더의 메뉴, 버튼의 아이콘 등
• Modifier(모디파이어): 블록 또는 엘리먼트의 상태나 속성, 상태. 

BEM 네이밍 규칙

BEM 방법론에서는 클래스를 .block__element--modifier 형식으로 네이밍 합니다.

• 단어는 소문자와 하이픈(-) 사용
• 블록과 엘리먼트는 __(언더바 두 개)로 구분
• 블록/엘리먼트와 모디파이어는 --(하이픈 두 개)로 구분

참조선택자로 BEM 방법론 네이밍에 효율 더하기

SCSS에서 BEM 스타일의 기본적인 구조입니다.

.block {
  // 블록의 기본 스타일
  &__element {
    // 엘리먼트 스타일
  }

  &--modifier {
    // 모디파이어 스타일
  }
}

보다시피, SCSS는 BEM 방법론과 매우 잘 어울립니다. SCSS의 네스팅(Nesting)과 참조선택자로 코드의 구조를 간결하게 표현하여 가독성과 관리 효율을 높일 수 있습니다.

 

아래 코드는 BEM 방법론에 따라 작성된 간단한 .card 스타일입니다. 방법론에 따라 클래스를 네이밍했지만, 각 코드블럭의 관계가 한눈에 들어오지 않아 가독성이 떨어집니다.

.card {
  background-color: white;
  border: 1px solid #666;
}

.card--highlighted {
  border-color: #007bff;
}

.card__title {
  color: #666;
}

.card__button--primary {
  background-color: #007bff;
  color: white;
}

 

이제 이것을 SCSS 문법으로 작성해 보겠습니다. 중첩된 구조로 요소간 관계가 쉽게 이해됩니다. 여러번 사용되는 색상을 변수로 처리하면 유지보수가 더욱 쉽습니다.

/* SCSS */

$primary-color: #007bff;
$text-color: #666;

.card {
  background-color: white;
  border: 1px solid $text-color;

  &--highlighted {
    border-color: $primary-color;
  }

  &__title {
    color: $text-color;
  }

  &__button--primary {
    background-color: $primary-color;
    color: white;
  }
}