BEM 방법론

• CSS 구조 및 상태를 관리하기 위한 CSS 개발 방법론
• CSS 클래스 네이밍 규칙을 다루는 방법론

1. 변수명을 위 세가지를 구분해서 __와 —로 구분하여 짓는 네이밍 규칙이다
⇒ aa__bb—cc (bb, cc는 선택이다)

2. id를 사용하지 않고, class만을 사용

3. 목적에 따라 이름을 지음(보이는 것에 따라 짓지x)

Block

• 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트

Element

• __이름

• 블록을 구성하는 단위

• 자신이 속한 블럭 내에서만 의미를 가짐 ⇒ 의존적

• element의 하위에 있는 element라도, 블럭에 __를 바로 붙여서 네이밍한다

Modifier

• —-이름

• 블럭이나 엘리먼트의 속성

• 조건에 따라 보여지는 선택자에 적용되는 네이밍

• 조건은 boolean일 수도 있고, key-value일 수도 있다

<ul class="menu">
  <li class="menu__item menu__item--clicked">메뉴 01</li> //boolean
  <li class="menu__item">메뉴 02</li>
  <li class="menu__item">메뉴 03</li>
</ul>

<div class="column">
  <strong class="title">일반 로그인</strong>
  <form class="form-login form-login--theme-normal"> //key-value
    <input type="text" class="form-login__id"/>
    <input type="password" class="form-login__password"/>
  </form>
</div>
 
<div class="column">
  <strong class="title title--color-gray">VIP 로그인 (준비중)</strong>
  <form class="form-login form-login--theme-special form-login--disabled">
      <input type="text" class="form-login__id"/>
      <input type="password" class="form-login__password"/>
  </form>
</div>