클래스 이름, 아무거나 짓지 마세요 – BEM 네이밍 쉽게 배우기

 

BEM 구조 한눈에 보기 – Block, Element, Modifier를 쉽게 이해하기

HTML을 짤 때 가장 흔히 듣는 질문 중 하나:
"클래스 이름 아무렇게나 지으면 안 되나요?"

결론부터 말하면, 안 됩니다. 이름 하나에도 질서가 있어야 코드 유지보수, 협업, 확장성이 좋아집니다.

💡 그래서 나온 게 BEM입니다

BEM은 Block / Element / Modifier의 약자입니다.
쉽게 말하면, "큰 덩어리(Block) → 내부 구성요소(Element) → 변형(Modifier)" 이런 식으로 클래스 이름을 체계적으로 짓자는 거죠.

🍌 BEM 네이밍 규칙

• Block: 독립적인 기능 단위
  card, btn, header
• Element: Block 안의 구성요소
  card__image, btn__icon
• Modifier: Block이나 Element의 변형
  btn--primary, card--highlighted

📝 실전 예제

버튼 예제

<div class="btn">
  <span class="btn__icon">🔍</span>
  검색
</div>

<div class="btn btn--primary">
  <span class="btn__icon">➕</span>
  추가
</div>

카드 예제

<div class="card">
  <img class="card__image" src="banana.jpg" alt="바나나">
  <h3 class="card__title">바나나 소개</h3>
</div>

<div class="card card--highlighted">
  <img class="card__image" src="banana-special.jpg" alt="특별 바나나">
  <h3 class="card__title">스페셜 바나나</h3>
</div>

🚫 입문자 주의사항

• 클래스 이름을 줄이지 마세요 (ex. crd 이런 거 ❌)
• Element는 항상 Block 이름 뒤에 __로 연결
• Modifier는 항상 --로 구분

🧠 한 줄 요약

클래스 이름에도 계급과 질서가 필요합니다.
바나나처럼 껍질과 속살을 명확히 나누자 🍌

다음 글: “BEM 구조로 진짜 페이지 하나 뚝딱 짜보기” 🍌