🔍
BEM 검사기
CSS 클래스명이 BEM 규칙을 준수하는지 실시간으로 검사하세요
📝 클래스명 입력
💡 각 클래스를 줄바꿈, 공백, 또는 쉼표로 구분하세요
📊 검사 결과
🔍
클래스명을 입력하면
검사 결과가 여기에 표시됩니다
📚 BEM 규칙 안내
🧱
Block (블록)
독립적으로 의미가 있는 컴포넌트
header
menu
search-form
card
규칙: 소문자, 숫자, 하이픈(-) 사용
🔗
Element (요소)
블록의 일부로, 독립적으로 사용할 수 없음
header__logo
menu__item
card__title
form__input
규칙: 블록명 +
__ + 요소명
🎨
Modifier (수정자)
블록/요소의 외관, 상태, 동작을 변경
button--primary
menu--horizontal
card__title--large
규칙: 블록/요소명 +
-- + 수정자명
⚠️ 흔한 오류
Header__Logo
→
header__logo
대문자 사용 불가
menu___item
→
menu__item
언더스코어 2개만 사용
btn---large
→
btn--large
하이픈 2개만 사용
card__title__text
→
card__title-text
요소 중첩 불가
💡 BEM이란?
🎯
명확한 구조
클래스명만 보고도 HTML 구조와 역할을 파악할 수 있습니다.
🔄
재사용성
독립적인 블록 단위로 컴포넌트를 재사용할 수 있습니다.
🛡️
충돌 방지
고유한 네이밍으로 CSS 스타일 충돌을 방지합니다.
👥
팀 협업
일관된 네이밍 규칙으로 팀원 간 코드 이해도를 높입니다.