BEM
BEM(Block, Element, Modifier) 방법론은 CSS 클래스 네이밍 규칙을 체계적으로 관리하기 위한 방법론입니다. 유지보수성과 재사용성을 높이기 위해 등장했으며, 주로 대규모 웹 애플리케이션에서 사용됩니다.
⸻
- BEM 구조
BEM은 다음과 같은 세 가지 개념으로 구성됩니다.
1) Block (블록)
독립적으로 존재할 수 있는 기본적인 구성 요소입니다. 예) header, menu, button, form, card
2) Element (요소)
Block 내부에서 특정 역할을 하는 하위 구성 요소입니다. Block 없이 독립적으로 존재할 수 없습니다. 예) menu__item, button__icon, form__input
3) Modifier (수정자)
Block 또는 Element의 상태나 스타일 변화를 나타냅니다. 예) button–primary, menu__item–active, card–large
⸻
- BEM 네이밍 규칙
BEM에서는 다음과 같은 규칙을 따릅니다. • Block: block-name • Element: block-name__element-name (언더스코어 2개 __ 사용) • Modifier: block-name–modifier-name 또는 block-name__element-name–modifier-name (하이픈 2개 – 사용)
예제 코드
상품명
상품 설명
.card { border: 1px solid #ddd; padding: 20px; }
.card–featured { background-color: #f0f8ff; }
.card__title { font-size: 20px; font-weight: bold; }
.card__button { border: none; padding: 10px; cursor: pointer; }
.card__button–primary { background-color: blue; color: white; }
⸻
- BEM의 장점
✅ 가독성 – 네이밍 규칙이 명확하여 의미를 쉽게 파악할 수 있습니다. ✅ 재사용성 – 클래스가 모듈화되어 있어 재사용하기 쉽습니다. ✅ 유지보수성 – 코드 구조가 일관되므로 유지보수가 편리합니다. ✅ 충돌 방지 – 고유한 네이밍 규칙을 사용하므로 스타일 충돌을 최소화합니다.
⸻
- BEM을 적용할 때 주의할 점
🔹 과도한 네이밍 사용 금지 – 너무 긴 이름을 사용하면 코드가 복잡해질 수 있음. 🔹 필요할 때만 Modifier 사용 – 스타일이 중복되지 않도록 필요한 경우에만 Modifier 추가. 🔹 CSS의 다른 기법과 병행 가능 – BEM을 Flexbox, Grid 등의 레이아웃 기법과 함께 사용할 수 있음.
⸻
결론
BEM은 CSS를 모듈화하고 유지보수를 쉽게 할 수 있도록 도와주는 방법론입니다. 특히 팀 프로젝트나 대규모 애플리케이션에서 매우 유용합니다. 🚀