[CSS] BEM(Block Element Modifier) 이란?

BEM(Block Element Modifier)

 

BEM(Block Element Modifier) 은 개발자들이 ID와 Class를 섞어 쓰면서,

 

HTML에서 자신이 ID를 썼는지 Class를 썼는지 헷갈리면서 계속 확인하게 되자

 

그 시간을 단축시키려고 Class만 사용하기로 통일 하면서 사용되었다고 한다.

 

---

 

Block

 

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

 

태그 값, id 사용x 클래스로 정의

 

position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용해야하니까!)

 

색상이나 크기 등을 묘사하는 이름x 구조적으로 의미 있는 이름으로 짓기

 

Ex)

<div class = "status-bar"></div>

 

---

 

Element

 

블록 내부에 종속되어 실제 기능을 담당하는 것

종속의 의미를 block-name__element-name로 나타낸다.

 

독립적으로 존재x 블록 내부에서 기능을 담당하는 요소

 

Ex)

<div class = "status-bar">
    <div class = "status-bar__column"></div>
</div>

 

---

 

Modifier

 

(간단하게 말하자면) block이나 element의 속성

block-name--modifier-name, block-name__element-name--modifier-name의 형태

 

Ex)

<div class = "status-bar">
    <div class = "status-bar__column"></div>
    <div class = "status-bar__column--big"></div>
</div>

 

---

 

장점과 단점

 

1.  클래스이름만으로 마크업 구조를 알 수 있다.

2. 블럭과 엘리먼트로 구분되기 때문에 어디서부터 떼어다 쓸 수 있는지, 어디부터 종속되는지 알 수 있다.

 

3.  이름만으로 부모 자식 관계를 명확하기 알 수 있다. 

 

4.  클래스이름이 너무 길어지고 더블클릭이 안되는 단점이 있다.

 

References

---

velog.io/@ylem76/BEM

nykim.work/15