[css] BEM :(Block, Element, Modifier) 이란?

CSS 방법론 BEM 개념

BEM : Block, Element, Modifier 구성된 클래스 이름을 짓는 CSS방법론이다

Id에서 사용하지 않고 오직 CSS명에만  활용할 수 있다

"어떻게 보이는가" 아니라 "어떤 목적인가 에 따라 이름을 짓는다

 

BEM 방법론은 다음과 같다

 

블록(Block) : 재사용 가능한 독립적인 블록요소이고, 사용자 인터페이스(ul) 의미 있는 부분을

나타낸다 블록은 일반적으로 하이픈(--)으로 구분된 단어 또는 짧은 단어 조합으로 되어있다

블록의 예로는 헤더, 푸더, 버튼, 내비게이션메뉴

예시 → header, footer, Button, nav--menu

 

요소(Element) : 블록을 구성하는 종속의 하위요소이다 블록 내에서 특정 기능을 수행하며

블록 외부에서는 사용할 수 없다 BEM요소의 이름은 언더바(__)로 구분된 블록이름과

요소의 이름으로 결합하여 형성된다 블록 nav-menu가 주어진 경우 그 안의 요소는

예시 →  nav-menu__item 또는 nav-menu__link라고 명명될 수 있다

 

수식어(Modifier) : 블록 또는 요소의 변형(모양, 상태, 동작)을 정의한다

블록 또는 요소의 변형을 생성하는 데 사용된다 수식어 이름은 블록 또는 요소 이름과

수식어 이름을 두 개의 하이픈(--) 구분하고 결합하여 형성한다

예시 → 블록 button이 주어진 경우 "비활성화 상태에 수식어는 button--disabled로

명명될 수 있다 요소 nav-menu__item 주어진 경우 "활성" 상태 수식어는

nav-menu__item--active로 명명될 수 있다

 

BEM을 사용하는 이유

1.BEM은 목적 또는 기능을 전달

2.BEM은 구성요소의 구조를 전달

3. 선택자의 특이성을 항상 낮은 수준으로 유지

 

BEM의 명명 규칙

1. 두 개의 언더바(__) 하위요소를 의미

2. 두 개의 하이픈(--) 상태 변형을 의미

3. 하나의 이름에 요소, 변형은 각 한 번만 사용

 

// 단순 블록

<button class="btn">

블록이 요소 또는 변형을 반드시 요구하는 것은 아니다

// 변형추가

<button class="btn btn--submit">

<em class="info__label info__label--warning ">

// 변형은 블록 또는 요소의 스타일을 확장한다

// 잘못된 사용

<button class="btn--submit">

// 올바른 사용

<button class="btn btn--submit">

<em class="info__label info__label--warning">

변형 클래스는 단독 사용불가 블록 또는 요소와 함께 사용한다.

 

실사용예시

<div class="card">

    <img class="card__image">

    <h2 class="card__title"> I am a card </h2>

    <p class="card__description"> I am the card Pargraph </p>

    <a class="card__button"> Learn more </a>

</div>

BEM 작성방법