BEM(Block Element Modifier) 방법론

BEM이란?

CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다.
html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 
이를 통해 복잡한 UI에서도 쉽고 빠르게 인터페이스를 개발할 수 있으며 복사 및 붙여 넣기없이 기존 코드를 재사용 할 수 있습니다.

- 2020 css 방법론 순위

 

작명규칙(Naming Convention)

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
• 소문자, 숫자 만을 이용해서 작명한다.
• 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.

 

블록 (Block)

• 재사용 할 수있는 기능적으로 독립적 인 페이지 구성 요소입니다. 
• HTML에서 블록은 class속성 으로 표시됩니다 .
• Block 은 중첩되어 상호작용 할 수 있지만 의미상으로는 동일하게 유지됩니다.
• 우선순위 또는 계층 구조가 없습니다. 

 

Naming 방법

• Block 의 Naming 은 라틴문자, 숫자, - (dashes) 로 구성됩니다.
• css 클래스를 생성하려면 클래스 앞에 짧은 접두어 .(dot) 를 붙여서 사용한다.

.block

- HTML

• DOM 노드에 클래스 이름을 넣어서 블록이름을 지어 줄수 있다.

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

 

- CSS

• class name 이나 selector 만 쓸 수 있습니다.
  
• 태그 이름이나 id 를 사용하지 않습니다.
• 한 페이지에서 다른 block 이나 element 에 의존하지 않습니다. 

.block { font-size: 15px; }

 

요소 (Element)

 

• 요소(element)는 블럭이 포함하고 있는 한 조각입니다. 
  
• 블럭은 전체를 말하고 요소들은 그 조각들을 일컫고 각 요소는 두개의 밑줄표시(underscore)로 연결하여 블럭 다음에 위치시킵니다.
  
• 요소는 서로 중첩 될 수 있습니다.
• 요소는 항상 다른 요소가 아니라 블록의 일부입니다. 즉, 요소 ​​이름은 block__elem1__elem2.

 

 

Naming 방법

• Element 의 Naming 방법은 Block 과 비슷합니다. 라틴 문자, 숫자, - (dashes) 그리고 또 추가적으로 _ 밑줄을 사용합니다. (underscores)
• css 클래스에서는 두개의 underscores 를 element name 에 붙입니다.   ( "_" 두개를 붙여서 사용한다)

.block__elem

- HTML

• 블록은 DOM 트리에 중첩 된 요소 구조를 가질 수 있습니다.

 

< div  class = "block" > 
    < div  class = "block__elem1" > 
        < div  class = "block__elem2" > 
            < div  class = "block__elem3" > </ div > 
        </ div > 
    </ div > 
</ div >

 

- CSS

• class name 이나 selector 만 쓸 수 있습니다.
• 태그 이름이나 id 를 사용할 수 없습니다.
• 한 페이지에서 다른 block/element과 의존성을 가지면 안됩니다.

 

.header__logo { property: value; }
.header__tagline { property: value; }
.header__searchbar { property: value; } 
.header__navigation { property: value; }

 

 

속성 (Modifiers)

• block 또는 elements 에 있는 flag 입니다. 
• 외부적인 부분의 변화를 주거나 상태 등을 변경할 때 사용됩니다.
• 특정 요소의 스타일을 수정할 필요가 있을때, 물론 modifier만 활용하면 됩니다. 
  
• 사용하기 위해서는 요소 또는 블럭 다음에 두개의 하이픈(‘‐‐’)을 추가하여 modifier을 표시합니다. 

 

Naming 방법

• modifier 의 이름은 라틴 문자, 이름, - (dashes), _ 밑줄 (underscores) 로 이루어 져 있습니다. 
• css 클래스는 block 이나 elements 의 이름에 두개의 dashes 를 붙입니다.

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

 

- HTML

• modier 은 당신이 DOM 노드에 block/elements 들을 추가한 것 외의 그 밖의 클래스 이름들 입니다.
• modifier 클래스를 추가할때는 수정된 block/elements 들만 추가하고, 원래의 것들은 그대로 놔둡니다.

<!-- correct -->
<div class = "block block--mod"></div>
<div class = "block block--size-big block--shadow-yes"></div>
 
<!-- incorrect -->
<div class = "block--mod"></div>

 

- CSS

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

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


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

 

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>

 

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

 

BEM 장단점

장점

• 재사용성과 직관적인 클레스(class)
  BEM은 이해하기 쉽고, 직관적인 클레스 이름의 작명을 하기가 쉽습니다. 
  또한, Block 기반의 스타일로 Block을 다른 곳에 재사용하기 쉽습니다.
• 클레스(class) 중복 방지
  BEM은 Block 단위의 class name을 통해 CSS의 원치 않은 상속을 제한하며, 클레스 네임 중복을 방지합니다.

 

단점

• 네이밍 명명법의 한계
  BEM은 초기 Block의 네이밍은 간결하지만 안에 세부 요소로 들어갈수록 복잡한 명명법을 갖게 됩니다. 이는 HTML내 복잡한 클래스(class)를 갖게 되며, 익숙치 않을 경우 괴이한 모습으로 비춰질 수 있습니다.
• BEM은 클래스 명이 길게 이어지다보니 바로 css 로 작성하는것 보다 sass나 less를 이용하는것이 효율적이다.

 

 

 

 

 

 

참고

• https://en.bem.info/methodology/key-concepts/
• https://webclub.tistory.com/263