Naming Convention 네이밍 컨벤션이란. (HTML,CSS,JS)

포스팅 타이틀

 

  우리는 가끔 클래스네임을 정의할 때 대충 대충 이름을 짓습니다. 이름을 정확하게 짓지 않아도, 정상적으로 작동한다는 것을 압니다. 하지만 사람들은 변수명, 클래스네임을 신중하게 정해라고 합니다. 왜 그럴까요? 만약에 자신의 코드를 한달 후에, 아니 일주일 뒤에 본다고 생각해보세요. 처음부터 다시 해석한다는 느낌으로 코드를 읽게 될 것입니다. 또한 다른 사람이 내 코드를 읽어볼 때도 코드를 이해하기 어려울 겁니다. 따라서 이름을 정할 때 오래 고민하는 것은 중요합니다.

 

  즉, 협업이나 유지보수에 있어서 생산성의 향상을 가져다줍니다. 또 다른 예를 들면 CSS의 경우 Selector 이름을 예쁘게 정의하면, 이름만 보고 어디에서 사용하는지 쉽게 알 수 있을 겁니다. 즉 여기서도 생산성이 증가합니다. 

 

  그렇다면 이름을 어떻게 지어야 할까요? 기업마다, 사람마다 다른 방식을 사용합니다. 틀린 것은 아닙니다. 하지만 대중적으로 사용되는 컨벤션 규칙들이 있습니다. 여기서는 CSS Selector를 작성하는데 있어서,  BEM이라고 불리는 컨벤션에 대해 알아보겠습니다.

 

BEM이란, Block Elements Modifier의 축약어입니다.

 

예를 들어 설명해 보겠습니다. 다음은 같은 뜻을 지닌 클래스 네임을 다른 방식으로 작성한 것입니다.

• mymenuitemvisible
• my-menu-item-visible
• myMenuItemVisible

 

  아마도, 해당 selector을 가지고 있는 HTML 구조는 대충 다음과 같이 이루어져 있을 겁니다.

<div class="mymenu">
    <div class="mymenuitemvisible>아이템</div>
    <div class="mymenuitemvisible>아이템</div>
    <div class="mymenuitemvisible>아이템</div>
    <div class="mymenuiteminvisible>아이템</div>
    <div class="mymenuiteminvisible>아이템</div>
</div>

class="mymenu" 라는 큰 블록 안에, class="mymenuitemvisible"이라는 엘리먼트들이 있습니다. 그리고 어떤 아이템들은 visible하고, 어떤 것은 invisible하네요. 이것이 모디파이어(Modifier)가 되겠습니다.(변경될 수 있다는 의미로 받아들이면 해석에 무리 없을 것입니다.)

 

 

  첫 번째 예시의 경우에, 우리는 어디서 단어가 시작하는기 모르기 때문에 조심스럽게 읽어야 합니다. 나머지 두 예시에서는, 클래스네임을 구성하는 각각의 단어가 명료하게 나누어져 있습니다. (각각 하이픈 - 과 대문자로). BEM방식은 여기에서 한 발자국 더 나아갑니다. block과 element, 그리고 modifier을 구분해서 클래스네임에 나타낼 것입니다.

 

BEM은 크게 다음과 같이 이루어집니다.

• 영어 소문자로 작성합니다.
• 일반 단어의 경우에는 - 으로 연결합니다. (my-menu)
• element의 경우에는  blcok 뒤에 __ (double underscore)으로 연결합니다. (__item)
• modifier의 경우에는 element 뒤에 _ 으로 연결합니다. (_visible)

즉, BEM방식으로 mymenuitemvisible이라는 selector를 작성하면 my-menu__item_visible이 되겠네요. selector의 이름만 보고도 어디서 사용하고 있는지 훨씬 더 잘 알아볼 수 있을 것입니다.

 

다른 예제들을 첨부합니다.

<!-- menu_hidden은 element가 없는 경우입니다. -->
<div class="menu menu_hidden"> ... </div>

<!-- span태그의 classname을 잘 보세요. -->
<div class="menu">
    <span class="menu__item menu__item_visible menu__item_type_radio"> ... </span>
    <span class="menu__item menu__item_visible menu__item_type_radio"> ... </span>
    <span class="menu__item menu__item_visible menu__item_type_radio"> ... </span>
</div>

 

 

네이밍 규칙들은 그저 하나의 약속일 뿐입니다. 이런 약속들은 지키지 않아도 되지만, 지키면 분명히 생산성 측면에서 좋은 결과를 가져올 겁니다. BEM이외의 많은 약속들이 존재합니다. CamelCase Style, React Style, No Namespace Style... 게다가 코딩을 해 나가면서 자신만의 네이밍 규칙들을 가질 수도 있습니다. 컨벤션을 따라서 코딩하는 것이 처음에는 쉽지 않습니다. 저도 새로운 프로젝트를 할 때 마다 바뀝니다.🤦‍♂️처음에 습관을 잘 들이도록 합시다..