[css] 올바른 css 네이밍

css 네이밍은 기본적으로 하이픈(-)으로 구분된 문자열을 사용한다.

 

하이픈 규칙의 올바른 예

.red-box { border: 1px solid red; }

 

체계적인 css 네이밍 규칙을 쓰면 class 이름만 보고

무엇을 하는지 / 어디서 사용하는지 / class 들과의 관계를 알 수 있다.

 

 

BEM 네이밍 규칙

 

B : BLOCK 

E : ELEMENTS 

M : MODIFIERS

 

B 라는 큰 그룹 아래로

E 라는 요소들이 있고,

이 요소가 갖고 있는 수식을 M이 지정했을 때

 

 

.stick-man__head--small { 
} 
.stick-man__head--big { 
}

 

큰 그룹인 .stick-man 이라는 클래스는 하이픈 형식으로

 

stick-man 이 갖고 있는 하위 요소인 head, leg, arm 등... 은 __ 형식으로

 

하위 요소를 꾸미는 수식어인 small red big large 등... 은 -- 형식으로 붙여준다.

 

정말 몰랐던 사실이다.

사실 시스템 쪽 css를 관리하면서 클래스를 명명하는 것도 어려웠지만

어떤 건 카멜케이스 방법으로, 어떤 건 하이픈으로 썼는데 그 기준도 모르고 뭐가 맞는지도 몰랐다.