HTML/CSS에서 id나 class 이름을 짓는 규칙

 HTML/CSS에서 id나 class 이름을 짓는 규칙은 코드 가독성과 유지보수성에 매우 큰 영향을 줍니다. 특히 협업 시에는 일관된 규칙이 꼭 필요합니다. 하나씩 정리해 드릴게요.

---

✅ id, class 이름 명명 규칙

1. 일반적인 원칙

• 의미를 담기: 시각적 모양(예: red-box) 보다는 의미(예: error-message)를 담는 것이 좋습니다.
• 영문 소문자 사용: 대문자, 특수문자보다는 소문자와 -(하이픈)을 주로 씁니다. (예: main-header, btn-primary)
• 일관성 유지: 프로젝트 내에서 한 가지 스타일을 고수합니다. (스네이크 케이스 vs 케밥 케이스)
• id는 고유하게: 한 문서에서 id는 유일해야 하므로, 스타일보다는 JS 선택자나 특정 구역 식별용으로만 사용합니다.
• class는 재사용 가능하게: 스타일링은 class 중심으로, 의미 있는 이름을 짓는 게 중요합니다.

---

✅ 흔히 쓰는 네이밍 규칙 스타일

1. 케밥 케이스 (kebab-case) → 가장 보편적
2. .main-header { } .login-form { }
3. 스네이크 케이스 (snake_case) → 잘 안 쓰이지만 가끔 사용됨
4. .main_header { }
5. 카멜 케이스 (camelCase) → JS 변수명과 섞어 쓰일 때 사용되기도 함
6. .mainHeader { }

👉 CSS에서는 케밥 케이스(- 사용)가 표준적으로 가장 많이 쓰입니다.

---

✅ BEM 방법론 (Block, Element, Modifier)

BEM은 CSS 클래스 네이밍 규칙으로, 대규모 프로젝트에서 특히 유지보수에 강력합니다.

1. 구조

• Block : 독립적인 컴포넌트 (예: card, menu)
• Element : 블록을 구성하는 하위 요소 (예: card__title, menu__item)
• Modifier : 변형된 상태, 속성 (예: card--highlighted, menu__item--active)

2. 네이밍 규칙

• Block은 독립적인 컴포넌트 단위
• Element는 block__element (언더스코어 두 개)
• Modifier는 block--modifier (하이픈 두 개)

3. 예제

<div class="card card--highlighted">
  <h2 class="card__title">제목</h2>
  <p class="card__description">내용</p>
  <button class="card__button card__button--primary">확인</button>
</div>

.card { border: 1px solid #ccc; padding: 1rem; }
.card--highlighted { border-color: orange; }

.card__title { font-size: 1.5rem; }
.card__description { color: #666; }
.card__button { padding: 0.5rem 1rem; }
.card__button--primary { background: blue; color: white; }

👉 이렇게 하면, 각 컴포넌트가 독립적으로 재사용 가능하고, 이름만 봐도 구조를 이해할 수 있습니다.

---

✅ 정리

• id: 문서 내 고유 식별자 → JS 제어용 (스타일링에는 남용 X)
• class: 스타일링/재사용용 → 의미 있는 이름 사용
• BEM: 블록/요소/수정자 방식으로 이름을 체계적으로 관리 → 협업, 확장, 유지보수에 강력

---

원한다면 제가 BEM 방식으로 변환한 실제 예제 (예: 로그인 폼, 네비게이션 바 등) 코드도 작성해드릴까요?

Regeln für die Benennung von ID oder Klasse in HTML/CSS