BEM

: 컴포넌트 기반 파일 이름 명명 규칙

Block

블록은 기능적으로 독립되어 재사용될 수 있는 컴포넌트입니다.

Element

요소는 블록에서 분리되어 사용할 수 없는, 블록의 일부분입니다. 요소는 서로 중첩될 수 없습니다.

두 개의 밑줄(underscore, __)로 표현됩니다.

ex) header__logo

Modifier

속성(Modifier)은 block이나 element 행동이나 상태 또는 외양을 정의하는 객체입니다.

속성의 경우 한개의 밑줄(_) 또는 하이픈(-)을 추가하여 표시합니다. (혹은 더블 하이픈 --을 사용하는 곳도 있습니다.)

1. Boolean

속성(Modifier)의 유무가 중요할 때 사용됩니다.

값이 상관 없을 때는 disabled로 표현됩니다.

사용 예시)

• block-name_modifier-name
• block-name__element-name_modifier-name

ex) search-form__buton_disabled

2. Key-Value

속성(Modifier)의 값이 중요할 때 사용됩니다.