[CSS] B.E.M 구조

 

최근 웹에서 CSS의 활용도가 높아짐에 따라 CSS를 보다 효율적으로 작성하는 다양한 방법이 생겨났습니다.

대표적인 방법론으로 BEM, SMACSS, OOCSS를 들 수 있습니다. 

 

오늘은 이 3개의 방법론 중 BEM에 대하여 정리해보겠습니다.

 

---

 

BEM의 기본 구조

 

BEM은 Block, Elemment, Modifier 의 약자 입니다.

이 3가지로 구성된 이름을 구분 짓는 방법은 "__"과 "--" 입니다.

 

.footer__nav--nav-content{
color:red;
}

위의 코드에서는 foorter 는 Block, nav 는 element, nav-content 는 Modifier가 됩니다.

 

BEM은 기본적으로 class만을 사용하며, id는 사용하지 않습니다.

또한 '어떻게 보이느냐' 보다 '어떤 목적인가'에 따리 이름을 짓습니다;

예를 들면, 에러메시지를 띄우는 p태그에 .red 가 아닌 에러 메세지라는 목적이 담겨있는 .error 라는 

이름으로 지어야 하는 것입니다.

 

이름을 연결할 때는 nav-content와 같이 하이픈 하나를 사용해서 연결합니다.

 

---

 

Blcok / Element / Modifier

 

1. Block

 

block은 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너를 말합니다.

e.g.  logo / login-form / menu / search-bar / nav-bar / content / footer / header

1.1 중첩 구조

block은 다른 block 내에 중첩될 수 있습니다. 예를 들어, 헤드 block은 logo, menu, search-bar, auth 다른 block들을 포함할 수 있습니다.

1.2 자유로운 배치

block 은 페이지 내의 어디든지 이동할 수 있습니다. 즉, blcok만 가져다가 다른 어딘가에 자유롭게 사용할 수 있습니다.

1.3 재사용

blcok은 header에 쓰일 수 도 있고 footer에 쓰일 수 도 있고, 여기저기에서 사용할 수 있습니다.

이렇게 재사용할 수 있는 요소를 block이라고 합니다.

 

2. Element

 

element는 block을 구성하는 단위입니다,

block은 독립적인 형태인 반면, element는 의존적인 형태입니다.

자신이 속한 block 내에서만 의미를 가지기 때문에 block 안에서 다른 데로 가져가서 사용할 수 없습니다.

 

2.1 block과 element의 차이

 

아래 html 코드에서 .search-form 은 block이고, search-form__input과 .search-form__button은 element 입니다.

.search-form이라는 block은 여기저기 마음껏 사용해도 되지만 내부의 input과 button은 검색을 위한 것이기 떄문에,

search-form안에서만 존재 의미가 있는 element입니다.

 

<form class="search-form">
	<input class="search-form__input">
    <button class="search-form__button">search</button>
</form>

2.2 중첩가능

element 또한 중첩이 가능합니다. .block > .block__element1 > .block__element2 도 가능합니다.

BEM에서는 .block__element2 를 .block__element1 의 하위 element로 보지 않고, 똑같이 .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>

위 코드는 block-name__element-name이란 형식을 따르지 않은 것으로, BEM에서는 아래 형태를 사용합니다.

<!--옳은 사용 예시-->
<form class="search-form">
	<div class="search-form__content">
		<input class="search-form__input">
    		<button class="search-form__button">search</button>
  	  </div>
</form>

.search-form__input과 .search-form__button을 search-form__content와 같이 search-form 의 element로 본다.

하위요소 x

 

3. Modifier

 

modifier는 block이나 element의 속성을 담당합니다.

생긴게 조금 다르거나 다르게 동작하는 block, element 를 만들 때 사용합니다.

 

3.1 불리언 타입

위 html 코드에서 --focused 가 modifier 에 속합니다.

이렇게 작성된 것을 불리언(boolean) 타입이라고 하는데, 그 값이 true라고 가정하고 이름 짓습니다.

<ul class="tab">
      <li class="tab__item tab__item--focused">tab</li>
      <li class="tab__item">tab</li>
      <li class="tab__item">tab</li>
    </ul>

e.g. __showing / __hover / __scale

 

3.2 키-밸류 타입

 

또 다른 타입으로, 키-밸류(key-value) 타입이 있습니다. 이것은 하이픈으로 성질-내용을 작성합니다.

 

 

<div class="column">
  <strong class="title">일반 로그인</strong>
  <form class="form-login form-login--theme-normal">
    <input type="text" class="form-login__id"/>
    <input type="password" class="form-login__password"/>
  </form>
</div>

<div class="column">
  <strong class="title title--color-gray">VIP 로그인 (준비중)</strong>
  <form class="form-login form-login--theme-special form-login--disabled">
      <input type="text" class="form-login__id"/>
      <input type="password" class="form-login__password"/>
  </form>
</div> 

 

위 코드에서 --theme-normal 과 --theme-special 이 키-밸류 타입의 modifier 속성이다.

 

---

BEM의 장점

 

클래스네임만으로 마크업 구조를 알 수 있습니다.

block과 element로 구분되기 때문에 어디서부터 가져다 사용할 수 있는지, 어디부터 종속되는지 알 수 있습니다.

 

SASS와 결합하면 몇가지 장점이 더 있는데 아직은 TMI 같아 생략합니다..ㅜ

 

BEM의 단점

클래스 네임이 지나치게 길어질 수 있습니다.

 

---

참고사이트

 

퍼블리셔 정민지님의 사이트를 보며 정리했습니다! 감사합니다. :)

blog.illunex.com/bem/

CSS 방법론 – BEM