[CSS] - BEM (Block Element Modifier) 방법론 [1]

GDG DevFest Seoul 2017 에서 백성훈님의 CSS 와 BEM 세션을 듣고 난 후, 현재 하고 있는 프로젝트에도 BEM 을 적용하면 좋을 것 같아서  개인적으로 정리하게 되었습니다

BEM (Block Element Modifier) ??

BEM 은 Yandex 라는 회사에서 개발한 방법론으로, 사내에서 프로젝트를 진행하다가  Naming Convention과 File Structure 문제를 겪게되어 방법론을 개발했다고 합니다.

먼저 CSS 방법론을 사용하는 이유로는

1. 쉬운 유지보수 가능

2. 재사용 가능 

3. 쉽게 확장 가능

이라는 공통의 목적을 가지고 있다고 합니다.

https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1

시작하기

Yandex 사에서 만든 BEM 은

-  일단 HTML 을 하나의 Interface 로 보고 있습니다

그리하여 여러개의 블록들로 이루어진 구조라고 생각하고 있습니다

block + block + block

block + block + block

block + block + block

BEM - B (Block)  

independent anywhere on the page = Component

- Block 은 독립적인 페이지 안에서 재사용 할 수 있는 컴포넌트들을 말합니다. 

- Block 은 중첩되어 상호작용 할 수 있지만 의미상으로는 동일하게 유지됩니다. 

- 우선순위 또는 계층 구조가 없습니다. 

- HTML 에서의 Block 은 class 속성으로 표시됩니다.

Naming 방법

Block 의 Naming 은 라틴문자, 숫자, - (dashes) 로 구성됩니다.

css 클래스를 생성하려면 클래스 앞에 짧은 접두어 .(dot) 를 붙여주세요

.block 

- HTML

어느 DOM 노드도 Block 이 될 수 있습니다. 클래스 이름을 넣을 수 있다면요

<div class = "block"></div>

- CSS

- class name 이나 selector 만 쓸 수 있습니다.

- 태그 이름이나 id 를 사용하지 않습니다.

- 한 페이지에서 다른 block 이나 element 에 의존하지 않습니다. 

1

.block { color: yellow; }

cs

BEM - E (Element)

no meaning on its own, it's name of a part for function

- 함수의 한 부분의 이름입니다. 그 함수 자체의 의미를 가지고 있지는 않습니다. 

- 어느 element 던간에 해당하는 block 과 의미론적으로 연결될 수 있습니다.

Naming 방법

Element 의 Naming 방법은 Block 과 비슷합니다. 라틴 문자, 숫자, - (dashes) 그리고 또 추가적으로 _ 밑줄을 사용합니다. (underscores)

css 클래스에서는 두개의 underscores 를 element name 에 붙입니다.

.block__elem

- HTML

Block 안에 있는 어느 DOM 노드도 element 가 될 수 있습니다.

주어진 블럭 안에서, 모든 element 들은 의미론적으로 동일하다는 것을 알 수 있습니다.   

<div class="block">
    <span class="block__elem"></span>
</div>

- CSS

- class name 이나 selector 만 쓸 수 있습니다.

- 태그 이름이나 id 를 사용할 수 없습니다.

- 한 페이지에서 다른 block/element과 의존성을 가지면 안됩니다.

/* Good */
.block__elem {
    color : yellow;
}

/* Bad */
.block .block__elem{
    color : yellow;
}
div .block__elem{
    color : yellow;
}

BEM - M (Modifier)

different version of a block or an element

- block 또는 elements 에 있는 flag 입니다. 

- 외부적인 부분의 변화를 주거나 상태 등을 변경할 때 사용됩니다.

Naming 방법

modifier 의 이름은 라틴 문자, 이름, - (dashes), _ 밑줄 (underscores) 로 이루어 져 있습니다. 

css 클래스는 block 이나 elements 의 이름에 두개의 dashes 를 붙입니다.

.block--mod or .block__elem--mod

.block--color-black with .block--color-red.

복잡한 modifier 의 공백들은 dashes(-)로 대신됩니다.

- HTML

modier 은 당신이 DOM 노드에 block/elements 들을 추가한 것 외의 그 밖의 클래스 이름들 입니다.

modifier 클래스를 추가할때는 수정된 block/elements 들만 추가하고, 원래의 것들은 그대로 놔둡니다.

<!-- Good -->
<div class = "block block--mod"></div>
<div class = "block block--size-big block--shadow-yes"></div>
 
<!-- Bad -->
<div class = "block--mod"></div>

- CSS

modifier class 이름은 selector를 사용합니다.

.block--hidden { }

block-level modifier의 기초가 되는 elements 들을 변경 할 때 : 

.block--mod .block__elem { }

element modifier : 

.block__elem--mod { }

Example

HTML

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

마무리

아직 낯설고 한 눈에 보았을때 알아보기 힘들지만, 막무가내로 Naming 하는 것보다 이렇게 방법론을 사용하여 팀내 코드 통일감을 부여하는 것이 좋을 것 같다. 

하지만 css 로 작업을 하다보면 어렵고 복잡해질 수 있으니 Less 나 Sass 를 사용하는 것도 좋다고 한다