CSS 네이밍 - BEM 방법론

📌 시작하기 앞서

많은 CSS를 사용할 경우 유지보수하기가 어려워집니다. 이러한 단점을 보완하고자, 여러 방법 중 네이밍에 대한 규칙을 정하고자 합니다. 네이밍으로 인해 얻을 수 있는 장점은 아래와 같습니다.
1.
올바른 네이밍으로 추후 유지보수 시간을 절약할 수 있습니다.
2.
읽기 쉽게 만들 수 있습니다.
3.
BEM 명명 규칙으로 컴포넌트와 블럭간의 관계를 쉽게 확인할 수 있습니다.

📌 기본적인 컨벤션

기본적으로 하이픈(-)으로 구분합니다.
.red-box { ... }
Plain Text

📌 BEM 네이밍 컨벤션

BEM은 기본적으로 ID를 사용하지 않고, class만을 사용합니다.
[BEM - B] Block에 해당하며, 하나의 컴포넌트를 의미합니다.
.man { ... }
Plain Text
[BEM - E] 컴포넌트 안에 구성 요소(Element)를 두 개의 밑줄(__)을 통해 Element를 추가합니다.
.man__head { ... } .man__arms { ... } .man__feet { ... }
Plain Text
[BEM - M] Modifiers를 의미하며, 버튼을 파란색이나 빨간색으로 꾸며줘야 할 때 두개의 하이픈(-) 과 modifier 클래스 명을 추가합니다.
.man--blue { ... } .man--red { ... }
Plain Text
.man__head--small { ... } .man__head--big { ... }
Plain Text

📌 참고 자료

TOP