16_CSS 네이밍 규칙

항상 지금까지 css 이름을 지을땐 나름의 규칙만 가지고 지었었는데, 이번 기회에 이를 바로잡을 필요가 있다고 생각하여 css 에서 class 이름을 짓는다면 어떤 방식으로 지어야 하는지 알아보았다.

 

 

보통 자바스크립트에서는 Camel case로 불리는 규칙을 많이 사용한다.

 

myNameIsMingyu 와 같은 형태이다.

 

하지만 css에서는 그렇지 않다. CSS에서는 우선 기본적으로 소문자와, 하이폰( - ) 을 사용한다

 

my-name-is-mingyu 와 같은 방식이다.

 

 

 

BEM 규칙

 

BEM규칙이란 Block, Element, Modifer의 줄인말이다.

 

아래 형태의 html을 보면서 생각해 보자.

 

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">

    <button class="search-form__button">Search</button>
</form>

 

Block은 기능적으로 독립된 컴포넌트이다. search-form 이 이에 해당된다.

 

Element는 블록에서 분리되어서 사용될수 없는 부분이다. 이는 서로 중첩될 수 없다. 위에서 __input이나, __button이 해당되며, 언더바 2개로 표시한다.

 

Modifier

속성은 block 혹은 element의 행동,상태,스타일을 정의한다. 밑즐 또는 하이픈을 사용하여 표시한다.

_theme_islands 가 이에 해당된다.

 

 

 

좋은 네이밍을 만들기 위해서는 아래 규칙을 지켜주면 좋다.

 

 

1. 하이픈 사용 

 

css속성들은 대게 하이픈으로 이루어져 있다 ( ex. margin-bottom ) 이 형식을 맞춰준다고 생각하면 편할 것 같다.

 

2. 소문자 사용

css 속성에서는 대문자를 사용하지 않는다.

 

3. 숫자

숫자를 사용한다면, 1,2,3이 아닌, 01,02,03으로 시작하게 만들어주는것이 좋다.

 

4. 순서

만약 하이픈을 이용하여 네이밍을 짠다면

 

(형태)(의미)(순서)_(상태)로 짜주는게 좋다.

 

btn-search-01_blue 와 같은 형태로 생각하면 될것 같다. 하지만 문서를 읽어보니 의미,형태는 바뀌는 경우도 있는 것 같다(?) 

 

 

 

 

또한 class가 아닌, id를 사용한다면 카멜 케이스를 사용하는것이 좋다고 한다.

 

무엇보다 위의 BEM 방법이나, 규칙들은 위 내용을 베이스로 하여 다른 규칙들을 병행하면 좋을 것 같다. BEM방식은 분명 직관적이지만, 세부적으로 들어갈수록 class이름이 복잡하고 길어질 수 있다는 단점이 존재하기 때문이다.

 

 

BEM 규칙에 대한 좋은 글을 첨부한다.

https://velog.io/@yesdoing/BEM-Block-Element-Modifier-Quick-start