CSS 방법론 Bem 표기법에 대해서 알아보자~!!

css

사실을 직시하자. 우리는 우리가 작성하는 코드가 읽기 쉬웠으면 한다.

그렇게 되면 더 빨리 그리고 더 효율적으로 일을 하는데 도움이 되고, 다른 개발자가 합류한다 하더라도 명확성과 일관성 있는 의미론을 유지할 수 있다. 요즘에는 CSS세계(OOCSS, SMACSS, BEM 등)에 표준도 많고 그에 따른 용어들도 아주 많은 것 같다. 다 이러한 것들이 CSS 구조를 개선시키기 위한 방법론인 것이다.

그래서 오늘은 BEM 방법론을 다루어 보겠다.

BEM은 Block Element Modifier의 약자이다. 이것은 문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는데 구조적인 방법을 제시한다. 만약 header__form—email과 같은 클래스명을 본적이 있다면, 그렇다! 이것이 바로 BEM 방버론을 활용한 것이다. BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다는 점에 주의하자. 필요하다면, 클래스명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있도록 허락하며, HTML과 CSS/Sass 파일에서도 더 일관된 코딩 구조를 만든다.

그럼 이제 분석해 보자!

1. Block

블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말한다. 보다 더 큰 구조적인 코딩의 덩어리로 생각해라. 헤더, 풋터, 사이드바, 그리고 메인 컨텐츠 영역을 가지고 있다고 가정하면, 이 각각의 영역들이 블럭으로 간주된다. 아래의 이미지를 보아라.

 

블럭 요소는 클래스의 어근을 형성하고 항상 맨 앞에 위치한다. 일단 블럭을 정의하면, 블럭이 형성한 클래스의 어근을 맨 앞에 붙여 그 블럭이 포함하는 요소들의 클래스명을 짓기 시작하면 된다.

2. Element

요소(element)는 블럭이 포함하고 있는 한 조각이다. 블럭은 전체를 말하고 요소들은 그 조각들을 일컫는다. 각 요소는 두개의 밑줄표시(underscore)로 연결하여 블럭 다음에 위치시킨다.

.block__element

.block__element

좀 이상하게 보일지 모르겠지만, 일단 이렇게 사용하기 시작하면 이 방법론을 배제시켜 CSS를 사용하는 것은 상상도 할 수 없을 것이다. 두개의 밑줄표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와준다.

아래의 것은 이 방법론이 실질적으로 어떻게 적용되는지 보여주는 예이다.

.header__logo { … }
.header__tagline { … }
.header__searchbar { … }
.header__navigation { … }

보면 알 수 있듯이, 이를 더 창의적으로 활용할 수도 있고, 이 방법론을 자신의 것으로 만들 수 있는 여지가 충분히 남아 있다. ‘navigation’은 ‘nav’로, ‘tagline’은 ‘tag’ 또는 ‘tagLine’으로 수정 가능하다. 여기서 요점은, 클래스명은 간단하고 명확하며 정확하게 유지해야 한다는 것이다. 너무 고민하지 않도록 하자. 스타일시트와 HTML 역시 DRY(don’t repeat yourself)로 유지되어야 하기 때문이다. 더 나은 의미론적인 방식을 찾았을때 클래스명을 업데이트 시키는데는 문제가 없어야 한다. 요소들은 어떻게 스타일시트를 구조화하고 어떻게 레이아웃을 다룰지 생각하도록 도움을 주는 클래스명의 핵심이 된다.

3. Modifiers

modifier은 블럭 또는 요소의 속성이다. 이 속성은 블럭 또는 요소의 외관이나 상태를 변화시킨다.

여기까지 그다지 썩 재미를 못 느낀다면, 이제부터는 점점 재미 있을 것이다. 클래스명을 지을때의 목적은 그 요소를 반복하여 재사용할 수 있게 하는 것이다. 그래서 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 된다. 특정 요소의 스타일을 수정할 필요가 있을때, 물론 modifier만 활용하면 된다. 이렇게 하기 위해서는 요소 또는 블럭 다음에 두개의 하이픈(‘‐‐’)을 추가하여 modifier을 표시한다. 간단한 예는 다음과 같다.

.block‐‐modifier {…}
.block__element‐‐modifier {…}

주의해라! 모든 이름은 간단 명료해야 한다. 그리고 절대적으로 필요하지 않는 이상, 추가적인 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다. header 블럭을 사용하는 코드를 가지고 이에 대해 이야기 해보자.

.header__navigation {…}
.header__navigation‐‐secondary {…}

만약 부차적인 네비게이션을 사용한다면, 아마도 레이아웃과 여백은 같을 것이나 적용되는 색을 다를 것이다. 우리는 메인 요소의 스타일을 복제하거나 훨씬 더 좋은 전 처리 장치를 활용할 수 있다. 바로 Sass의 @extend 활용으로 부차적인 네비게이션은 메인 요소의 모든 속성을 상속받는다. 그리고 그것들을 우리는 적절한 스타일로 수정하여 적용할 수 있다.

.header__navigation { background: #008cba; padding: 1rem 0; margin: 2rem 0; text-transform: uppercase; } 
.header__navigation‐‐secondary { @extend .header__navigation; background: #dfe0e0; }

“하지만 클래스명이 너무 길다.”라고 생각할지 모르겠다. 저자의 생각은, BEM 클래스명은 구체적이고 명료하며 HTML 안에서도 읽기 쉬워야 하고, 클래스명이 무엇을 나타내는지 분명하게 전달 되어야 한다 라는 것이다.

BEM 클래스명을 좋아하는 이유는 각 html 태그에 오직 클래스명 하나만 사용해야 한다는 것이다. labels을 예로 어떻게 활용되는지 보자. 표준이 되는 선택자는 다음과 같다.

.label .label-default {...} 
.label .label-alert {...}

다음은 BEM 방법론을 활용한 선택자이다.

.label {...}
.label‐‐alert {...}

Sass와 같은, 좀 더 구체적으로 말하면 Scss(CSS3를 확장하여 만든 stylesheet)와 같은 언어들은, 사소한 예외를 제외하고는, 같은 스타일을 각 요소들이 빠르게 공유할 수 있도록 만들어 준다. 아래의 예는 스타일을 복제하는 것을 막고, 오히려 필요한 것을 우리가 변경할 수 있도록 한다. 그래서 저자가 BEM 방법론을 아주 좋아하는 이유는 “panel panel-default col-md-3”과 같은 애매모호한 클래스들을 결합시킬 필요가 없다라는 것이다. 간단한 예로, 우리가 위에서 정의했던 label에 다음과 같은 스타일을 줄 수 있다.

.label { background: #eee; border-radius: 505; color: #333; font-size: 1rem; } 
.label--alert { @extend .label; background: #da4531; color: #fff; }

4. 결론

그래, 바로 그것이다. 아주 간결한 BEM! 이미 알겠지만, 알아야 할 것들이 아주 더 많다. BEM은 훨씬 진화된 시스템이다. 이것은 우리가 작성하는 코드에 명료함을 가져다 주고, 더 잘 정의할 수 있도록 도와주며, 프론트 엔드 개발면에서 분류의 체계를 설정할 수 있도록 만든다.

많은 경험자들에 의하면, BEM 방법론은 프로토타입을 더 효율적으로 만들어 제품 수준의 코드로 빨리 전환하는데 엄청나게 도움을 준다고 한다.

• An Introduction to the BEM Methodology – 번역 원문 보기
• bem.info – Definitions – Methodology – BEM. Block, Element, Modifier