BEM(Block, Element, Modifier)은 CSS 네이밍 체계를 구조화하여 유지보수성과 재사용성을 높이기 위한 방법론입니다. 웹 프로젝트가 커질수록 CSS 코드도 복잡해지기 때문에, BEM 방식을 통해 명확하고 일관된 네이밍 규칙을 유지하는 것이 중요합니다. 이 글에서는 BEM의 기본 개념과 사용법을 살펴보면서 웹 개발 시 클래스를 효율적으로 관리하는 방법을 소개하겠습니다.
1. BEM 방식의 개념
BEM 방식은 각 컴포넌트를 Block(블록), Element(요소), Modifier(수정자)로 분류하여 네이밍 규칙을 적용합니다. 각 단위는 다음과 같은 특성을 가집니다.
- Block (블록): 독립적으로 존재할 수 있는 기본 컴포넌트입니다. 예를 들어, ‘헤더’나 ‘카드’ 같은 구조를 나타내며, 다른 요소와 결합하지 않은 상태로 사용됩니다.
- Element (요소): 블록의 일부로, 블록 안에서 특정 역할을 하는 하위 요소입니다. 예를 들어 ‘버튼’ 블록의 ‘아이콘’은 버튼의 일부로 사용되는 요소입니다.
- Modifier (수정자): 블록이나 요소의 속성을 변경하는 데 사용되며, 모양, 상태, 동작 등을 조정하는 클래스입니다. 예를 들어, 버튼의 색상이 다르거나 크기가 다른 경우 해당 속성을 수정하는 방식입니다.
2. BEM 네이밍 규칙
BEM의 클래스 명명 규칙은 각 단계를 구분하기 위해 블록__요소–수정자 형식을 사용합니다. 블록과 요소, 요소와 수정자 간에는 각각 다른 구분자를 사용하여 명확하게 구분할 수 있습니다.
- 블록(Block):
.block - 요소(Element):
.block__element - 수정자(Modifier):
.block__element--modifier
<div class="card"> <h2 class="card__title">제목</h2> <p class="card__text">본문 내용</p> <button class="card__button card__button--primary">클릭</button> </div>
여기서 card는 블록, card__title과 card__text는 요소, card__button--primary는 버튼의 색상 속성을 수정하는 수정자입니다.
3. BEM 방식의 장점
BEM 방식의 네이밍 체계는 다음과 같은 장점을 제공합니다.
- 명확한 구조: 네이밍 규칙이 구조화되어 있어, 클래스 이름만 보고도 요소의 관계를 쉽게 파악할 수 있습니다.
- 유지보수성 향상: 코드가 길어질수록 특정 요소의 스타일을 쉽게 찾아 수정할 수 있어 관리가 용이합니다.
- 재사용성 증가: 요소가 독립적으로 설계되기 때문에 여러 곳에서 재사용할 수 있으며, 수정자만 변경하여 다양한 변형을 적용할 수 있습니다.
4. BEM 방식 적용하기
(1) 블록과 요소 나누기
우선 웹 페이지의 주요 컴포넌트를 블록 단위로 구분합니다. 블록을 설정한 후에는 블록 안에 포함될 요소들을 식별하고 네이밍을 정합니다.
<div class="header"> <div class="header__logo">로고</div> <nav class="header__nav">네비게이션</nav> </div>
(2) 수정자 추가하기
수정자는 블록이나 요소에 특정 속성 변화를 적용할 때 사용됩니다. 예를 들어, 버튼의 크기와 색상을 수정하여 다양하게 사용하고자 할 때 다음과 같이 수정자를 추가합니다.
<button class="button button--large button--primary">큰 파란 버튼</button> <button class="button button--small button--secondary">작은 회색 버튼</button>
(3) CSS 파일에서 BEM 적용하기
HTML과 CSS 모두에서 BEM 방식의 네이밍을 적용하여 구조화된 스타일을 유지할 수 있습니다.
/* 블록 스타일 */
.button {
padding: 8px 16px;
border: none;
cursor: pointer;
}
/* 요소 스타일 */
.button__icon {
margin-right: 4px;
}
/* 수정자 스타일 */
.button--primary {
background-color: blue;
color: white;
}
.button--secondary {
background-color: grey;
color: white;
}
.button--large {
padding: 12px 24px;
}
.button--small {
padding: 4px 8px;
}
5. BEM 방식으로 네이밍할 때의 주의 사항
- 명확한 블록 정의: 컴포넌트를 독립적으로 정의하려면 블록 단위로 구분하는 것이 중요합니다. 블록이 너무 작거나 크면 유지보수가 어려울 수 있으므로, 프로젝트의 구조에 맞게 적절한 단위로 나누는 것이 좋습니다.
- 일관성 유지: 프로젝트 내 모든 클래스에 BEM 규칙을 일관되게 적용하여 코드의 가독성을 높입니다. 예를 들어, 모든 수정자는 동일한 구분자(
-)를 사용해야 합니다. - 불필요한 중복 피하기: 블록이나 요소 이름을 반복적으로 사용하지 않도록 주의합니다. 예를 들어,
.button__button--primary와 같이 중복된 이름은 피합니다.
6. BEM 방식의 예시 프로젝트
BEM 네이밍을 적용한 예시 프로젝트를 통해 전체적인 코드를 확인할 수 있습니다.
<!-- 예시 HTML 구조 --> <div class="profile-card"> <img src="profile.jpg" alt="프로필 사진" class="profile-card__image"> <h2 class="profile-card__name">홍길동</h2> <p class="profile-card__description">웹 개발자</p> <button class="profile-card__button profile-card__button--primary">팔로우</button> </div>
/* 블록 */
.profile-card {
border: 1px solid #ddd;
padding: 16px;
width: 300px;
}
/* 요소 */
.profile-card__image {
width: 100%;
border-radius: 50%;
}
.profile-card__name {
font-size: 24px;
margin-top: 8px;
}
.profile-card__description {
font-size: 16px;
color: #666;
}
/* 수정자 */
.profile-card__button {
padding: 8px 12px;
border: none;
cursor: pointer;
}
.profile-card__button--primary {
background-color: blue;
color: white;
}
위와 같이 profile-card 블록 내에 profile-card__image, profile-card__name, profile-card__description 등의 요소가 있고, profile-card__button--primary 수정자를 사용하여 버튼의 색상을 변경했습니다. 이와 같은 구조는 프로젝트를 보다 쉽게 관리하고 확장할 수 있게 합니다.
BEM 방식은 웹 프로젝트에서 클래스를 일관되게 정의하고, 재사용과 유지보수를 용이하게 해줍니다. 블록, 요소, 수정자라는 간단한 개념을 기반으로 한 이 네이밍 체계는 대규모 프로젝트에서도 효과적으로 사용될 수 있으며, 웹 퍼블리싱에서 더욱 효율적이고 체계적인 CSS 작성을 가능하게 합니다.
