[CSS] BEM이 뭘까

BEM

BEM은 CSS 방법론이다.

말이 어렵지만 풀어 말하면 'CSS 클래스네임을 어떻게 지으면 좋을지' 개발자들이 머릴 맞대고 고민한 결과이다.

html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다.

Block

독립적으로 존재하고 재사용 가능한 요소를 block으로 명명

• 태그 값, id 사용 X 클래스로 정의
• position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용하기 위해!)
• 색상이나 크기 등을 묘사하는 이름 X 구조적으로 의미 있는 이름으로 짓기
• ex) .btn{}

Element

블록 내부에 종속되어 실제 기능을 담당하는 것
종속의 의미를 "block-name__element-name"로 나타낸다.

• 독립적으로 존재x 블록 내부에서 기능을 담당하는 요소
• ex) .btn__price{}

Modifier

(간단하게 말하자면) block이나 element의 속성
block-name--modifier-name, block-name__element-name--modifier-name의 형태

• ex) .btn--big{}