BEM
BEM(Block, Element, Modifier)은 CSS 클래스의 이름을 체계적으로 관리하기 위한 방법론이다. 웹 프로젝트에서 CSS의 재사용성과 유지보수성을 높이는데 도움이 된다.
BEM에서는 세 가지 주요 개념으로 구성된다.
block__element--modifier
아래는 BEM 구조 예시이다.
<div class="header">
<div class="header--logo">
<div class="logo">
<a href="#" class="logo__link">
</div>
</div>
<div class="header--navbar">
<ul class="navbar">
<li class="navbar__item navbar__item--active">Home</li>
<li class="navbar__item">About</li>
<li class="navbar__item">Contact</li>
</ul>
</div>
</div>
소문자와 숫자만 사용하고, 두 단어를 조합할 때는 -으로 연결해야 한다는 공통 규칙이 있다.
ex) blackBox(x) black-box(o)
Block
-
독립적이고 재사용 가능한 단위를 의미한다.
-
블록은 보이는 것이 아니라, 목적을 설명한다.
-
블록은 중첩될 수 있다.
-
ex)
navbar,button,card,nav-menu
<!-- O : 목적-->
<div class="error"></div>
<!-- X : 보이는것 -->
<div class="red-text"></div>
<!-- 중첩 예시 -->
<header class="header">
<div class="logo"></div>
<form class="search-form"></form >
</header>Element
-
Block의 일부로, 좀 더 개별적인 부분을 의미한다. 블록에 종속되기 때문에 블록 없이 존재할 수 없으며, 블록 외부에서 사용할 수도 없다.
-
엘리먼트는 중첩될 수 있지만, 계층을 정의할 수는 없다. 요소의 요소를 만들 수 없음에 주의하자.
-
블록과 엘리먼트는
__로 연결한다. -
ex)
navbar__item,button__icon,card__title
<!-- O : 중첩 -->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</div>
</form>
<!-- X : 계층 -->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__content__input">
<button class="search-form__content__button">Search</button>
</div>
</form>
<!-- 중첩 예시 -->
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
Modifier
- Block이나 Element의 모양, 상태, 동작을 나타낸다. 기본 기능을 변경하지 않으며 크기, 색상, 활성화 상태, 동작 등을 변경할 때 사용한다.
- 수정자는
--로 연결한다. - ex)
navbar__item--active,button--disabled,card__title--large
<!-- O -->
<div class="block block--mod"></div>
<div class="block block--size-big block--shadow-yes"></div>
<!-- X -->
<div class="block--mod"></div>
주요 장점
-
유지보수
-
BEM은 네이밍 규칙이 명확하여 시간이 지나거나 다른 개발자가 프로젝트에 합류해도 쉽게 코드를 이해할 수 있다.
-
블록, 엘리먼트, 수정자가 각각 분리되어 있기 때문에 각 클래스가 어떤 역할을 하는지 직관적으로 알 수 있다.
-
체계적인 네이밍 규칙으로 새로운 요소나 상태를 추가할 때 일관되게 적용할 수 있다.
-
-
재사용성
-
각 블록이 독립적으로 동작하기 때문에 여러 페이지나 컴포넌트에서 재사용하기 쉽다.
-
컴포넌트를 작은 단위로 모듈화해서 사용하므로 스타일을 체계적으로 관리할 수 있다.
-
-
CSS 충돌 방지
-
각 블록과 엘리먼트가 고유한 이름을 갖기 때문에 CSS 클래스 간에 충돌할 가능성이 낮아진다.
-
특정 블록에 엘리먼트나 수정자를 추가해도 다른 블록과 상호작용하지 않으므로 CSS 충돌을 피할 수 있다.
-
-
가독성
- 클래스 이름은 길어지지만, 네이밍 규칙이 규칙적이기 때문에 HTML의 역할이 명확하게 드러난다. 코드를 직관적으로 읽을 수 있다.
