CSS 클래스 네이밍 원치과 BEM 방법론

1️⃣ 클래스 네이밍이 중요한 이유

CSS 클래스는 스타일을 정의하는 기본 다위이며, 우리가 가장 자주 사용하는 선택자입니다. 특히 재사용 가능한 스타일을 만들기 위해선 클래스 이름 하나에도 신중을 기해야 합니다.

🔹 좋은 클래스 이름의 조건

• 역할과 기능을 설명해야 함
• 특정 HTML 태그에 종속되지 않아야 함 (.page-title 처럼 어떤 태그에도 적용 가능)
• 디자인 속성을 포함하지 말 것 (.title-blue ❌)

예를 들어 .title-blue는 "파란 타이틀" 이라는 의미지만, 만약 색상이 바뀌면 클래스 이름도 수정해야 하고, 이는 유지보수를 어렵게 만듭니다.

2️⃣ 클래스 명명 규칙 - keba-case

클래스 이름은 다음 규칙을 따르는 것이 좋습니다.

• CSS는 대소문자를 구분하지 않기 때문에 snake_case, camelCase는 혼란을 일으킬 수 있음 → 소문자만 사용
• 단어 사용은 하이픈(-) 으로 구분 → kebab-case 사용

/* 좋은 예 */
.page-title
.main-header

/* 나쁜 예 */
.pageTitle
main_header

3️⃣ BEM이란?

BEM(Block, Element, Modifier) 은 CSS 클래스 명명 방법론 중 하나로, 구조적이고 일관된 네이밍 체계를 통해 유지보수성과 협업 효율을 높여줍니다. 특히 프로젝트 규모가 커질수록 클래스 이름이 겹치거나, 예상치 못한 스타일 충돌이 발생하기 쉬운데, BEM은 이런 문제를 미연에 방지할 수 있습니다.

🔹 구성 요소

🔹 명명 규칙

• Block__Element--Modifi 구조
• __ (더블 언더스코어)로 Block과 Element 구분
• -- (더블 하이픈)으로 Modifier 구분

4️⃣ 예제 코드

<button class="button button--primary">
  <span class="button__icon"></span>
  Click me
</button>

<style>
.button {
  background-color: gray;
  color: white;
  padding: 10px 20px;
  border: none;
}

.button__icon {
  margin-right: 5px;
}

.button--primary {
  background-color: blue;
}
</style>

👀 코드 해석

• .button: 블록 - 기본 버튼 스타일
• .button__icon: 요소 - 버튼 내 아이콘
• .button--primary: 수정자 - 주요 버튼 스타일

5️⃣ 실무 적용 예시

.main-header {}                /* 블록 */
.main-header__brand {}         /* 블록의 하위 요소 */
.toggle-button {}              /* 또 다른 블록 */
.toggle-button__bar {}         /* 요소 */
.main-nav__item--cta {}        /* 수정자 - 행동 유도 버튼 */

✔️ 이처럼 BEM 구조로 클래스명을 작성하면, 요소의 역할과 위치를 쉽게 파악할 수 있고, 이름이 겹치는 문제를 방지할 수 있습니다.

6️⃣ BEM의 장점과 주의사항

✅ 장점

• 명확한 구조: 클래스명만 봐도 역할 파악 가능
• 스타일 충돌 감소: 깊은 선택자 사용 없이 정확한 지정 가능
• 재사용성 증가: UI 컴포넌트 단위로 분리 가능
• 협업 효율 향상: 팀원이 코드를 쉽게 이해 가능

⚠️ 주의할 점

• 이름이 너무 길어지는 것 주의
• Block은 독립적이고 재사용 가능한 단위여야 함
• Modifier는 불필요하게 남발하지 말 것
• Modifier 이름은 기능 중심이어야 하며, 스타일 중심(x) 이 되지 않도록