naming convention

코딩 컨벤션 · BEM

Block · Element · Modifier 네이밍 사전. 항목을 클릭하면 클립보드에 복사됩니다.

표기 규칙

  • 형식 block__element--modifier
  • element는 __, modifier는 --
  • 단어 구분은 하이픈 1개 — privacy-policy
  • 예시 header__nav--active
  • 모두 소문자. 카멜케이스 · 언더스코어 1개 금지

금지 규칙

  • element의 element 금지 — block__el1__el2 ❌ → block__el1-el2 ⭕
  • modifier 단독 사용 금지 — class="button button--disabled"
  • block 없는 element 금지
  • modifier는 클래스당 1축(state · variant · size · shape · color)만

block vs element

  • 떼어내도 의미 성립 → block (card, nav)
  • 부모 없이 의미 없음 → element (card__title)
  • 재사용되면 block으로 승격
BEM 네이밍 사전
구분 분류 항목
folder depth1
  • core
  • base
  • global
  • mobile
  • tablet
  • desktop
depth2
  • common
  • home
  • main
  • sub
  • popup
  • component
file · page name
  • guide
  • privacy-policy
  • cover
  • profile
  • promotion
  • test
  • login
  • detail
  • user
  • setting
  • support
  • management
  • board
  • result
  • send
  • load
  • error
  • search
  • notice
  • faq
  • edit
block depth1
  • header
  • footer
  • main
  • aside
  • modal
  • popup
depth2
  • nav(navigation)
  • info(information)
  • notice
  • board
  • copyright
depth3
  • container
  • card
  • content
element depth1 위치
  • top
  • middle
  • bottom
  • left
  • right
  • header
  • footer
  • front
  • side
  • back
depth2 역할
  • title
  • description
  • image
  • button
  • link
  • icon
  • list
  • form
  • tab
  • bar
depth3 조각
  • item
  • text
  • label
  • value
  • input
  • wrap
  • badge
  • thumb
modifier state
  • active
  • inactive
  • enabled
  • disabled
  • selected
  • checked
  • unchecked
  • hidden
  • open
  • close
  • loading
  • error
  • success
  • warning
variant
  • primary
  • secondary
  • public
  • private
  • normal
  • special
  • ghost
  • outline
size
  • xs
  • sm
  • md
  • lg
  • xl
  • short
  • long
  • wide
  • narrow
  • tall
  • thin
  • thick
shape
  • round
  • square
  • circle
  • pill
  • flat
color
  • dark
  • light
  • accent
  • point
  • brand
  • muted
  • danger