[CSS] CSS방법론 - BEM
CSS 방법론이란 CSS 클래스 네임을 어떻게 작성할지, 어떤식으로 스타일을 작성할지 등 CSS를 보다 효율적으로 작성하는 아이디어이다.
여러 개의 CSS 방법론이 있지만 이러한 방법론들이 공통적으로 중요하게 생각하는 목표가 있다.
- 코드의 재사용성 용이
- 직관적인 클래스 네이밍
- 원활한 유지보수
- 확장성
또한 CSS 선택자로 아이디나 타입 또는 html 태그의 사용을 지향하고 있다. 그 이유는 아이디는 클래스와 다르게 재사용이 불가능하며, 마크업을 수정할 경우 태그에 스타일을 적용한 부분을 다시 수정해야할 일이 생길수도 있기 때문이다.
오늘은 여러 방법론중에 BEM에 대해 알아보자.
1. BEM의 기본 구조
BEM은 Block, Element, Modifier를 뜻한다. 이 세가지로 구성되도록 클래스 이름을 짓는 것이 바로 BEM이다.
1
2
3
.header__navigation--navi-text {
color: red;
}
위 코드가 바로 BEM 규칙을 사용해 클래스 이름을 명명한 것이다. header 가 Block, navigation 는 Element, navi-text 는 Modifier가 된다.
BEM은 CSS 방법론의 중요 목표대로 기본적으로 ID를 사용하지 않고 class만을 사용한다.
또 ‘어떻게 보이는가’가 아닌 ‘어떤 목적인가’에 따라 이름을 짓는다. 예를 들어, 에러 메시지를 띄우는 빨간색을 가지는 P 태그에는 .red 가 아닌, .error 라는 이름을 지어주어야 한다.
또 단어를 연결할때는 navi-text 와 같이 - 하이픈 하나를 사용해서 연결한다.
이제 BEM의 기본구조 각각 의미하는 바에 대해 알아보자.
1. B(Block)
Block은 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너를 의미한다.
1.1 Block 중첩기능
Block은 다른 Block내에 중첩될 수 있다. 예를 들어, 헤드 Block은 로고, 검색폼, 메뉴 등 다른 Block등을 포함할 수 있다.
1.2 Block 자유로운 배치
Block은 페이지 내의 어디든지 이동할 수 있다. 즉, Block만 가져다가 다른 어딘가에 자유롭게 사용이 가능하다.
1.3 Block 재사용
Block은 헤더에 쓰일 수도 있고, 푸터에 쓰일수도 있고 여기저기에 사용할 수 있다.
이렇게 재사용할 수 있는 요소를 Block이라 한다.
2. E(Element)
Element는 Block을 구성하는 단위이다. Block은 독립적인 형태인 반면, Element는 의존적인 형태이다. 자신이 속한 Block 내에서만 의미를 갖기 때문에 Block안에서 다른데로 가져가서 사용할 수 없다.
2.1 block과 element의 차이
1
2
3
4
<form class="search-form">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
위 코드에서 search-form 은 Block 이고, search-form__input 과 search-form__button 은 Element이다. search-form 은 여기저기 마음껏 사용해도 되지만 내부의 input과 button은 검색을 위 한 것이기 때문에 search-form 안에서만 존재 의미가 있는 element이다.
2.2 중첩가능
Element도 중첩이 가능하다.
1
2
3
4
5
6
7
<!--잘못된 사용 예시-->
<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>
위 코드가 잘못된 예시인 이유는 .search-form > .search_form__content > search_form__content_input, search_form__content_button 이 형태로 구조가 짜여져 있다.
즉, .block > .block__elemnt1 > .block__element2 이러한 형태라는 것인데 BEM에서는 .block__element1 를 .blcok__element2 의 하위 엘리먼트로 보지 않고 두 엘리먼트 다 .block 의 하위 엘리먼트로만 취급한다는 점이다.
따라서 아래와 같이 작성해야 올바른 방법이다.
1
2
3
4
5
6
7
<!--올바른 사용 예시-->
<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 의 형식을 지켜주어야 한다.
3. M(Modifier)
Modifier는 블럭이나 엘리먼트의 속성을 담당한다. 생긴게 조금 다르거나 다르게 동작하는 block, element를 만들 때 사용한다.
1
2
3
4
5
<ul class="tab">
<li class="tab__item tab__item--focused">탭 01</li>
<li class="tab__item">탭 02</li>
<li class="tab__item">탭 03</li>
</ul>
3.1 Boolean 타입
위 코드에서 --focused 가 수식어에 해당한다.
저렇게 작성된 것을 boolean타입이라고 하며 그 값이 true라고 가정하고 사용한다.
3.2 Key-Value 타입
또 다른 타입으로는 key-value 타입이 있다. 이 타입은 하이픈으로 성질-내용 을 작성한다.
1
2
3
4
5
6
7
<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-special 이 key-value 타입에 해당한다.
참조