BEM 방법론 기초

BEM

BEM (Block, Element, Modifier) is a component-based approach to web development

 

BEM 방법론은 요소(component)기반의 접근 방식으로 빠른 요소 접근을 통해 개발하기 쉽도록 하는 것이 목표이다.

BEM을 구성하는 엔티티로는 Block, Element, Modifier가 있다.

Block의 네이밍

• Block의 목적에 중점
• 상태나 환경에 관한 것 X
• CSS 태그, ID 선택자 사용 X

block-name

<div class="header"></div>

Element의 네이밍

• 요소란? 블록을 이루는 부분으로서 따로 사용할 수 없는 것
• 요소는 블록의 자손으로 존재하며
• 요소는  블록 외부에서 스스로 사용될 수 없다.
• 블록 이름과 요소 이름은 이중 밑줄(__)로 구분
• 요소 이름은 중첩 되어 나타낼 수 없다. 항상 블록 하위 요소로 요소를 정의한다.

block-name__element-name (O) // block-name의 하위에 있는 element-name의 클래스명

block-name__element-name1__element-name2 (X) 
-> 분리
block-name__element-name1
block-name__element-name2

<div class="header">
    <div class="header__logo"></div>
    <div class="header__button"></div>
</div>

 

Modifier의 네이밍

• 블록과 요소의 모양,상태 또는 동작을 정의
• 수정자 이름은 단일 밑줄(_)로 구분
• 수정자는 요소나 블록과 함께 사용되며, 수정자 단독으로 사용되지 않는다.

block-name__element-name ->요소 네이밍
block-name__element-name_modifier-name_modifier_value->수정자 네이밍
=> 두 가지 모두 클래스에 포함

<div class="header">
    <a class="header__logo header__logo_visited"></a>
    <div class="header__button header__button_disabled"></div>
</div>

 

혼합

• 하나의 html 노드에 다른 BEM 엔티티를 혼합하여 사용할 수 있다.
• 코드의 재사용을 줄이면서, 각각의 블록에 맞게 코드를 짤 수 있다.
• menu요소면서 header의 menu

<div class="header">
    <a class="header__logo header__logo_visited"></a>
    <div class="header__button header__button_active"></div>
    <ul class="menu header__menu"></ul>
</div>

 

---

요약:

• 소문자 라틴 문자로 작성
• 단어간 하이픈(-)으로 구분
• 블록 이름 -> 네임 스페이스로 정의
• 요소 이름 -> 이중 밑줄(__)로 구분
• 수정자 이름-> 단일 밑줄(_)로 구분
• 수정자 값-> 단일 밑줄(_)로 구분
• 단 부울 수정자는 수정자 이름만 사용가능