BEM 방법론

최훈오·2023년 11월 9일

목록 보기

10/29

BEM 방법론을 잘 모르고 저번 과제에 BEM 방법론을 썼다가 코드리뷰를 받을때 BEM 방법론을 아예 모르는데 흉내만 내고 있다는 생각이 들었다.. 마침 다음 과제에 BEM 방법론으로 레이아웃을 개발하는 요구사항이 있으므로 한번 정리하고 이해할 후에 제대로 사용해보자.

BEM이란?

CSS 클래스네임을 어떻게 지으면 좋을지에 대한 CSS 방법론들 중 하나이다.

기본구조

BEM은 Block, Element, Modifier를 뜻하고 저 세가지로 구성된 이름을 짓는다.

.header__navigation--required{
	color: red;
}

각각 header는 Block, navigation은 Element, required는 Modifier가 된다.
BEM이 뭔지 자세히 알아보자

업로드중..

Block
- 재사용이 가능하고, 어딘가에 종속되어 있지 않은 기능적으로 독립적인 컴포넌트
Element
- 블럭을 구성하는 단위로 의존적인 형태이다. 자신이 속한 블럭 내에서만 의미를 가지므로 떼어다 다른데 쓸 수 없다.
- __로 구분한다.
- 중첩이 가능하므로 캐스케이딩을 여러번 표시할 필요가 없다.
```
<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>
```
  따라서 위와 같이 사용하지 하지 않고, 아래와 같이 사용한다.
```
<form class="search-form">
	<div class="search-form__content">
		<input class="search-form__input />
		<button class="search-form__button">Search</button>
    </div>
</form>
```
  block-name__element-name형식을 따른 모습이다.
  
  개인적으로 매번 작성할때마다 위아래 방식을 헷갈려하는데 아래방식으로 고정하여 사용하자!
Modifier
- 블럭이나 엘리먼트의 속성
- 요소의 외관이나 상태를 변화시킬 때 사용한다.
- 보여지는 대로가 아닌, 속성의 기능이나 목적에 의미를 두고 작성한다.
  ex) 필수로 입력해야 하는 곳에 form__label-start, form__label-red 이런식이 아닌, from__label-required 이런식으로 작성하는 것이 좋다.
- Boolean타입과 key-value 타입 두가지로 나뉜다.
```
/* Boolean type */
<div class="search__input search__input--disabled"></div>
<button class="btn btn--active"></button>
/* Key-value type */
<div class="search__title search__title--color-red"></div>
<button class="btn btn--theme-xmas"></button>
```
- --로 구분한다.

규칙

id를 사용하지 않고 class만을 사용한다.
'어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 짓는다.
이름을 연결할 때는 하이픈 하나만 써서 연결한다. ex) block-name
대문자를 사용하지 않고, 오로지 숫자와 소문자만을 사용한다.

장점

클래스네임만으로 마크업 구조를 알 수 있습니다.
블럭과 엘리먼트로 구분되기 때문에 어디서부터 떼어다 쓸 수 있는지, 어디부터 종속되는지 알 수 있습니다.
작성된 scss에서 요소를 쉽게 찾을 수 있습니다.
ex).header 아래에 &__logo, &__search로 작성하기 때문에 헤더의 로고, 헤더의 검색을 쉽게 알 수 있다.
엘리먼트 구조를 병렬적으로 작성하므로 컴파일 시 셀렉팅이 깊어지지 않는다.

/*기존에 쓰던 방식*/
.header {
   .nav {
      position: absolute;
      .list {
         list-style: none;
      }
      .item {
         /*너무 길어진다 싶을 때만 밖으로(근본없는 들여쓰기!)*/
         outline: 0;
         .link {
            color: red;
         }
      }
   }
}
 
/*BEM*/
.header {
   &__nav {
      position: absolute;
   }
   &__list {
      clor: red;
   }
   &__item {
      /*여기 있는 모든 요소들은 블럭 내의 엘리먼트이기 때문에 캐스케이딩과 무관하게 병렬 작성*/
      outline: 0;
   }
   &__link {
      color: red;
   }
}