BEM(Block, Element, Modifier)은 CSS 클래스 명명 규칙 중 하나로, 유지 보수와 재사용성을 높이고 CSS 구조를 명확하게 만들기 위해 사용된다.
B__E--M
class명을 작성할때 이름을 어떤걸로 할지 햇갈릴경우 BEM 규칙을 활용하면 이름을 정할때 많은 도움이 된다.
W3C는 스타일링에 대해 다음과 같은 원칙을 제시한다.
| 원칙 | 설명 |
|---|---|
| 구조와 표현의 분리 | HTML은 구조, CSS는 스타일을 담당해야 함 |
| 선택자의 명확성과 유지 보수성 | CSS 선택자는 명확하고 예측 가능해야 함 |
| 접근성과 호환성 고려 | 클래스 네이밍과 구조는 의미 있고 일관성 있어야 함 |
BEM이란?
BEM 은 프런트엔드 개발에서 재사용 가능한 구성 요소와 코드 공유를 만드는 데 도움이 되는 방법론입니다.
기본 구조 : block__element--modifier (블록__요소--상태)
| 구성 요소 | 설명 |
|---|---|
| Block | 독립된 컴포넌트 단위 (예: card, btn) |
| Element | block 내부 구성요소 (예: card__title, btn__icon) (Block에 종속됨) |
| Modifier | 상태 또는 변형 (예: btn--primary, card__title--highlighted) |
- Block: .block
- Element: .block__element
- Modifier: .block--modifier 또는 .block__element--modifier
- 하이폰과 _ 언더바 두개로 구분을 지어준다.
BEM 규칙으로 할경우 다음과 같은 장점이 있다.
- 클래스 이름만 보고 구조를 유추할 수 있음
- CSS 충돌 방지
- 재사용성과 유지 보수성 향상
- 대규모 프로젝트에 적합
BEM 예시
<button class="btn btn--primary">
<span class="btn__icon btn__icon--clickable"></span>
</button>
레이아웃 구조 HTML 예시
<body class="page">
<header class="page__header header">
<div class="header__logo">MyLogo</div>
<nav class="header__nav nav">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#" class="nav__link">About</a></li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</nav>
</header>
<main class="page__main main">
<section class="main__content content">
<h1 class="content__title">Welcome</h1>
<p class="content__text">This is the main content area.</p>
</section>
<aside class="main__sidebar sidebar">
<h2 class="sidebar__title">Sidebar</h2>
<ul class="sidebar__menu">
<li class="sidebar__item">Item 1</li>
<li class="sidebar__item">Item 2</li>
</ul>
</aside>
</main>
<footer class="page__footer footer">
<p class="footer__text">© 2025 MyCompany</p>
</footer>
</body>
-각 Block은 독립적이며, 재사용 가능하게 만든다.
-Modifier가 필요할 경우 --active, --dark, --large 같은 클래스를 추가하여 상태나 버전을 표현한다.
-위 구조는 SCSS 구조화, Tailwind 적용, 컴포넌트 기반 개발에도 응용이 가능하다.
참고자료
BEM — Block Element Modifier
Flexible Using BEM, methodologies and tools can be recomposed and configured the way you like.
getbem.com
