[CSS] BEM: 네이밍 방법론

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

 

개발을 하다보면, 이름을 짓는 것이 참 어렵고, 중요하다는 사실을 느낄 때가 많다. 

개인적인 생각에는 잘 지어놓은 이름은 두고두고 코드를 이해하는데 작용하는거 같다. 

네이밍 방법론에 대표적인 것들에는 다음과 같은 것들이 있다. 

 

대표적인 네이밍 방법론

• CamelCase(카멜 표기법): 두 개 이상의 단어가 모인 합성어에서 맨 처음 단어를 대문자로 표기하는 방법
  • lowerCamelCase
  • UppperCamelCase
• snake_case(스네이크 표기법): 두 개 이상의 단어가 모인 합성어에서 언더라인(_), 또는 하이픈(-)을 사용하는 방법
• Hungarian notation(헝가리안 표기법): 변수명 작성시에 자료형을 구분 지을 수 있는 접두사를 달아서 표기하는 방법
  • 과거에는 많이 사용했지만, 요즘에는 잘 사용하지 않는 방법이라고 한다. 그 원인을 생각해보자면 요새는 런타임에 자료형이 바뀌는 언어도 많고(?), 유지보수를 하다보면 자료형이 바뀌는 경우(예: list -> map)도 종종 발생하기 때문이다.

인터넷을 찾아보면, 각 언어마다 권장되거나 관습적으로 사용하는 표기법이 따로 있는데, 정답이 있는 것은 아니니 각 프로젝트의 규칙에 맞추어 일관성 있게 이름을 짓는 것이 중요하다.

 

BEM: Block, Element, Modifier

CSS에서는 클래스 네임으로 컴포턴트의 스타일을 지정하는데 이 때, 해당 클래스 네임을 어떻게 잘 지을수 있을까라는 고민으로 부터 나온 네이밍 규칙중 하나가 BEM이다. 

 

예시)

 

 

.html

<div class="user-component">
	<div class="user-component__column">
    	<img src="https://avatars.githubusercontent.com/u/3612017?v=4"
        	class="user-component__avatar user-component__avatar--sm"/>
        <div class="user-component__text">
          	<h4 class="user-component__title user-component__title--not-bold">Channel</h4>
        </div>
    </div>
    <div class="user-component__column">
        <div>
            <span>2</span>
            <i class="fas fa-chevron-right fa-xs"></i>
        </div>
    </div>
</div>

.css (일부)

.user-component__avatar--sm {
    width: 60px;
    height: 60px;   
    border-radius: 25px;
}

.user-component__title--not-bold {
    font-weight: 0;
}

.user-component__column:last-child {
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

Block

독립적인 의미를 가지는 추상화된 컴포넌트를 의미한다. 

ex) user-component__title

Element

블록의 구성요소이다. 자신이 속한 Block내에서만 의미를 가지기 때문에 Block에 의존적이다. 

ex) user-component__title, user-component__column

Modifier

Block이나 Element의 속성(상태 또는 행동) 담당한다. 생긴 게 조금 다르거나(예: not--bold) 다르게 동작하는 블럭이나 엘리먼트를 만들 때, 추가하는  방식으로 사용한다. 

ex) user-component__title-not-bold

 

참고

http://getbem.com/naming/

BEM — Block Element Modifier

https://nykim.work/15

[CSS 방법론] BEM 방식