BEM(Block Element Modifier)에 관하여

BEM ( Block Element Modifier )

.header__nav--sta

위와 같은 스타일의 클래스작명규칙( naming convention )을 BEM이라 한다.

각 요소의 연관성을 분명하게 볼 수 있는 것이 장점이다.

---

아래글은 csswizardry.com의 글을 가져온 것입니다.

BEM Naming Convention

.block{}
.block__element{}
.block--modifier{}

.block 은 높은단계의 구성요소를 말한다.

.block__element 는 .block의 자식을 나타낸다.

.block--modifier 는 .block의 다른 상태나 버전을 나타낸다.

좀 더 쉽게 예를 들어보자면 아래와 같다.

.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}

최고 단계는 '사람'이고 '사람'을 구성하는 요소는 '손'이 있다.

또한 '사람'은 '여성'이라는 다른버전(?)이 있다. 이 다른버전의 사람또한 '손'을 구성요소로 가지고 있다.

위의 코드를 보니 클래스간의 연관성이 확실히 눈에 잘 들어온다.

이걸 그냥 일반적인 css로 써본다면 아래와 같다.

.person{}
.hand{}
.female{}
.female__hand{}
.left-hand{}

각각의 클래스가 의미는 있지만 클래스간의 연관성은 찾아보기 힘들다고 할 수 있다.

BEM의 강점을 느낄 수 있는가?

<form class="site-search  full">
    <input type="text" class="field">
    <input type="Submit" value ="Search" class="button">
</form>

위의 클래스 설정만으로도 우리는 모든 작업을 할 수 있다.

허나 각각의 요소들이 가진 관계에 비해 클래스명은 너무 개별적이다.

이것을 BEM표기법으로 바꿔보도록 하자.

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

.site-search 를 보고 우리는 '아 이것이 가장 상위블록이구나' 라는걸 금방 알 수 있다.

그 안에는 .site-search__field 와 .site-search__button 이라는 자식 요소가 있고 .site-search--full 이라부르는 상위블록의 변형이 있다는 걸 알수도 있다.

단점이라면 못생김?

클래스명이 길기때문에 좀 더 타이핑을 해야하고 모양이 꽤나 우습기 때문에 BEM을 사용하기 꺼려하지만 직관적으로 해석할 수 있는 BEM의 힘은 강력하다고 말할 수 있다. 프로젝트의 규모가 커지면서 중복되거나 의미가 헷갈리는 클래스들이 많아서 수정하기 위해 클래스명을 딱 봤을때 한번에 그 용도와 의미를 해석하기 힘들지만 BEM은 그렇지 않다는게 장점. 유지보수가 더욱 쉬워진다.

하지만 모든 곳에 사용할 필요는 없다. 연관관계가 없는 것들은 홀로 사용되도록 나눠도 된다.

BEM에서 가장 어려운부분이라고 할 수 있다. BEM을 적용하는 범위의 시작과 끝을 결정하는 것. 혹은 BEM을 사용해야하는지를 결정하는 것이다.

이것은 하다보면 알게 될것이다라고 글쓴이는 말하고 있다.

결론

BEM은 유용하고, 강력하고, 간단한 작명규칙이다. 

프론트엔드 코드를 읽기 쉽고, 이해하기 쉽고, 작업하기 쉽고, 확장하기 쉽고, 더 건강하고 명확하고 엄격하게 만들어준다.