[CSS] CSS 클래스 작명 / BEM

BEM

• Block-Element-Modifier / BEM을 이용해 작명한다.

 

이점

• 목적, 기능을 명확히 전달
• 클래스 이름만으로 구조 파악의 용이성

단점

• 잘못하면 클래스네임이 엄청 길어질 수 있다.

 

Block

문단 전체에 적용된 element나 element를 담고있는 컨테이너

Element

block을 구성하는 단위

block은 독립적, element는 의존적

block 내에서만 의미를 가진다.

Midifier

block이나 element의 속성을 담당

다르게 동작하거나 다른 외형을 가져야 할 때 추가하여 사용

 

 

주의사항

• 클래스에만 사용, id는 유일한 것이기 때문에 이 방법을 따르지 않는다.
• 블록과 요소는 목적을 기반으로 작명
• 구조의 깊이 표현 x , 

.card__ul__li ( x )
이런식으로 깊이를 표현 x

.card__list ( o )

자식의자식의자식의A라 쳤을 때
.block__자식__자식__자식__A (x)
.block__A (o)

 

• 아래 방식을 이용해 표기한다. 

modi-fier

modifier--modifier

.block

.block--modifier

.block__element

.block__element--modifier

.block__element--key-value

 

 

 

참고

작명법

https://9elements.com/bem-cheat-sheet/

BEM Naming Cheat Sheet by 9elements

naradesign.github.io

https://naradesign.github.io/bem-by-example.html

예제로 이해하는 BEM.

https://blog.illunex.com/bem/