BEM(Block, Element, Modifier)은 HTML과 CSS의 클래스 네이밍 규칙을 위한 방법론이다. 이 방법론은 Yandex 팀에 의해 개발되었으며, 대규모의 프로젝트에서도 일관된 코드를 유지하도록 도와준다. BEM의 핵심 목적은 재사용 가능하고, 유지 관리가 쉬우며, 의존성이 낮은 컴포넌트를 생성하는 것이다.
BEM의 구조
BEM은 클래스 이름을 구성하는 세 가지 주요 부분으로 이루어져 있다:
- Block (블록): 독립적인 구성 요소를 의미하며, 재사용이 가능해야 한다. 예를 들어,
.button,.menu등이 블록에 해당한다. - Element (엘리먼트): 블록 내부의 부분으로, 블록에 의존적이다. 엘리먼트는 두 개의 밑줄로 블록과 구분된다. 예를 들어,
.button__text는 'button' 블록의 'text' 엘리먼트를 나타낸다. - Modifier (수정자): 블록이나 엘리먼트의 상태나 변형을 나타낸다. 수정자는 하나의 대시(-)로 구분되며, 예를 들어
.button--active는 활성 상태인 'button'을 나타낸다.
BEM의 장점
- 명확성: 클래스 이름만 보고도 해당 구조가 어떤 역할을 하는지 쉽게 이해할 수 있다.
- 재사용성: 스타일을 쉽게 재사용하고, 확장할 수 있다.
- 독립성: 스타일 충돌을 방지하고, 코드의 이해 및 유지보수를 쉽게 한다.
BEM 사용법
BEM 방법론을 사용할 때는 다음과 같은 규칙을 따른다:
- 블록: 각각의 독립적인 구성 요소는 고유한 블록으로 취급한다.
- 엘리먼트: 블록 안에서 기능적으로 의존적인 요소들을 엘리먼트로 명명한다.
- 수정자: 블록이나 엘리먼트의 변형을 설명하는 추가적인 이름을 붙인다.
코드 예시
HTML:
<!-- "button" 블록 -->
<button class="button button--state-success">
<!-- "button" 블록의 "text" 엘리먼트 -->
<span class="button__text">클릭하다</span>
</button>CSS:
/* "button" 블록 */
.button {
padding: 10px 20px;
border: none;
cursor: pointer;
}
/* "button" 블록의 "state-success" 수정자 */
.button--state-success {
background-color: green;
color: white;
}
/* "button" 블록의 "text" 엘리먼트 */
.button__text {
font-size: 16px;
}이 예시에서 .button은 블록을, .button__text는 엘리먼트를, 그리고 .button--state-success는 수정자를 나타낸다. 이렇게 BEM은 클래스 이름을 통해 어떤 HTML 요소가 서로 관련이 있는지, 그리고 어떤 역할을 하는지 명확하게 표현해준다.
BEM 개념 사용 시 주의할 점들!
BEM과 컴포넌트 기반 프레임워크
React나 Vue.js와 같은 컴포넌트 기반 프레임워크에서 BEM을 사용하면 각 컴포넌트의 스타일이 겹치지 않도록 도와준다. 각 컴포넌트의 최상위 요소를 블록으로, 내부 요소를 엘리먼트로 취급하며, 상태에 따른 변화는 수정자로 표현한다.
주의점
- 클래스 이름이 지나치게 길어지는 것을 방지하기 위해, 의미가 분명한 경우에는 약어를 사용할 수 있다. 하지만 약어가 너무 추상적이거나 이해하기 어려워서는 안 된다.
- BEM은 단순한 웹 페이지보다는 복잡한 인터페이스나 대규모 프로젝트에 더 적합하다.
- 모든 경우에 BEM을 강제할 필요는 없으며, 프로젝트의 요구사항에 맞게 적절하게 조정하는 것이 중요하다.
실제 프로젝트에서의 BEM 활용
실제 프로젝트에서 BEM을 활용하는 방법은 다음과 같다.
- 초기 설계: 프로젝트를 시작할 때 BEM 방법론을 따르도록 초기 설계 단계에서부터 결정한다.
- 문서화: 프로젝트의 스타일 가이드나 문서에 BEM 규칙을 명시하여 팀 내에서 일관성을 유지한다.
- 리팩토링: 기존 프로젝트에 BEM을 도입할 경우, 점진적으로 리팩토링을 진행하며, 복잡
한 선택자를 BEM 방식으로 변경한다.
4. 코드 리뷰: 팀원들이 BEM 규칙을 잘 지키고 있는지 코드 리뷰를 통해 확인하고, 일관성을 유지한다.
실제 활용 예를 들어, 웹사이트의 헤더(header)에 대한 BEM 스타일을 적용한 코드는 다음과 같을 수 있다.
HTML:
<header class="header">
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a class="header__link header__link--active" href="#">홈</a>
</li>
<!-- Other list items -->
</ul>
</nav>
</header>CSS:
.header {
background: #333;
}
.header__nav {
// ...
}
.header__list {
list-style: none;
margin: 0;
padding: 0;
}
.header__item {
display: inline;
}
.header__link {
color: white;
text-decoration: none;
&--active {
border-bottom: 2px solid white;
}
}이 코드는 .header 블록에 속한 여러 엘리먼트와, 활성 상태를 나타내는 --active 수정자를 어떻게 적용하는지 보여준다. BEM은 이처럼 구조적으로 명확한 코드를 작성하게 하여, 팀원들이나 다른 개발자가 코드를 더 쉽게 이해하고 수정할 수 있도록 도와준다.
실제 예시
다음은 포럼의 댓글 섹션을 BEM으로 구현한 예시이다.
HTML:
<article class="comment">
<header class="comment__header">
<img class="comment__avatar" src="avatar.png" alt="User Avatar">
<h3 class="comment__author">사용자 이름</h3>
</header>
<div class="comment__body">
<p>댓글 내용이 여기에 들어간다...</p>
</div>
<footer class="comment__footer">
<a class="comment__reply-link" href="#">답글 달기</a>
</footer>
</article>CSS:
.comment {
background: #f9f9f9;
border: 1px solid #e1e1e1
;
margin-bottom: 24px;
padding: 16px;
}
.comment__header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.comment__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 8px;
}
.comment__author {
font-size: 1rem;
color: #333;
}
.comment__body {
font-size: 0.875rem;
line-height: 1.6;
}
.comment__footer {
text-align: right;
}
.comment__reply-link {
color: #007bff;
text-decoration: none;
font-size: 0.875rem;
}이 예시는 각각의 댓글을 .comment 블록으로 표현하고 있으며, 댓글의 제목, 본문, 그리고 푸터를 .comment__header, .comment__body, .comment__footer 엘리먼트로 나타낸다. 이런 방식으로 BEM을 사용하면, 스타일 시트 내에서 쉽게 특정 부분을 찾을 수 있으며, 코드의 가독성과 유지보수성을 크게 향상시킬 수 있다.
이제 BEM의 고급 사용법과 실제 프로젝트에서의 활용 방안에 대해 알아보았다. 다음 섹션에서는 이러한 방법론을 실제로 어떻게 적용하는지, 그리고 다양한 예시를 통해 더 깊이 있는 이해를 도울 것이다.
