표준 CSS 방법론
; CSS 클래스명을 어떻게 지으면 좋을지에 대해 정의

기본 구조

Block + Element + Modifier

• .(block 명)__(element 명)--(modifier 명)

• ID를 사용하지 않음

• Class만을 사용함

• 명명은 '어떻게 보이는가'가 아니라 '어떤 목적이냐'에 따라

• 명명 시, white space 구분은 '-' 하나로

Block

재사용 가능한 기능적으로 독립적인 페이지 component

Ex.

<div class="logo">

• Nested Block 허용
  Ex. .(block1)>.(block2)
  // block이 block을 감싼 형태

Element

Block을 구성하는 단위

• 자신이 속한 Block 내에서만 의미를 가짐 (의존적)

Ex. (속한 block 명)__(element 명)

<form class="search-form">
    <input class="search-form__input"/>
    <button class="search-form__button">Search</button>
</form>

• Nested Element 허용
  Ex. .block>.block__element1>.block__element2
  // block 내에 element1과 element2가 위치함
  
• class 명에 cascading을 여러 번 표시할 필요가 없음

Ex.

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__input"/>
      <button class="search-form__button">Search</button>
  </div>
</form>

Cf.

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__content__input"/>
      <button class="search-form__content__button">Search</button>
  </div>
</form>

Modifier

Block이나 Element의 속성

Ex. (속한 block/element 명)--(modifier 명)

1. boolean type
   Ex. --focused

   <ul class="tab">
   <li class="tab__item tab__item--focused">탭 01</li>
   <li class="tab__item">탭 02</li>
   <li class="tab__item">탭 03</li>
   </ul>

2. key-value type
   Ex. --theme-normal, --color-gray

   <div class="column">
   <strong class="title">일반 로그인</strong>
   <form class="form-login form-login--theme-normal">
   <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>
     	      

장점

클래스 명만으로 마크업 구조를 알기 쉬움

Ref

BEM을 따른 마크업 Implementation
https://nykim.work/15