CSS class naming convention

Jaemin Jung·2022년 4월 23일

CSS

목록 보기

4/4

대표적인 Naming Case

kebab-case(케밥 표기법)

kebab-case, header-container, btn-list, menu-list ...
(하이픈)으로 단어를 연결하는 표기법
HTML 태그의 class 속성으로 흔히 사용됨

camelCase(카멜 표기법)

camelCase, typeName, lightBox, darkBox ...
기본적으로 변수명을 모두 소문자로 씀
여러 단어가 이어지는 경우 첫 단어를 제외하고 각 단어의 첫글자만 대문자로 지정

PascalCase(파스칼 표기법)

PascalCase, TypeName, LightBox, DarkBox ...
카멜 표기법과 같으나, 파스칼 표기법은 첫번째 글자도 대문자로 선언

Snake_case(뱀 표기범)

snake_case, background_color, light_box, main_container ...
단어를 _(언더바)로 구분하는 표기법

BEM Naming Rules

기본 구조

BEM은 기본적으로 id를 사용하지 않으며, class만을 사용한다.
어떻게 보이는가 가 아니라 어떤 목적인가에 따라 이름을 짓는다.
예를 들어, 에러 메세지를 띄우는 P태그에는 .red가 아니라 .error 라는 이름을 줘야 한다.
이름을 연결 할 때는 block-name 과 같이 하이픈 하나만 써서 연결한다.

.header__navigation--navi-text {
  color: red;
}

위 코드에서 header는 Block, naviagtion은 Element, navi-text는 Modifier가 된다.

B - Block

BEM 에서 B는 Block 을 의미한다.
실제 환경에서 Block은 사이트의 Nav, Header, Footer 등
재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 말한다.

위 이미지에서 Logo 는 어딘가에 종속되지 않는다.
header에 쓰일 수도 있고, footer에 쓰일 수도 있다.
이렇게 재사용할 수 있는 요소를 block이라고 한다.

block은 block을 감쌀 수 있다. .header>.logo는 header라는 block 안에 logo 라는 block이 들어간 형태이다.

E - Element

BEM 에서 E는 block을 구성하는 단위로 Element 를 의미한다.
block은 독립적인 형태인 반면, Element는 의존적인 형태다.
자신이 속한 block 내에서만 의미를 가지기 때문에 block 안에서 떼어다 다른 데 쓸 수 없다.

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

예시에서 .search-form 은 block이고 .search-form__input과 .search-form__button은 element다.

input과 button은 검색을 위한 인풋창이자 버튼이기 때문에, search-form 안에서만 존재 의미가 있는 element다.

element도 중첩이 가능하다.
.block > .block__element1 > .block__element2

BEM은 .block__element2가 .block__element1의 하위 엘리먼트로 보지 않고,
둘 다 똑같이 .block의 element로 취급한다.

그래서 className에 cascading을 여러번 할 필요 없다.

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__content__input"/>
      <button class="search-form__content__button">Search</button>
  </div>
</form>

good

<form class="search-form">
  <div class="search-form__content">
      <input class="search-form__input"/>
      <button class="search-form__button">Search</button>
  </div>
</form>

M - Modifier

BEM 에서 M은 block이나 Element의 속성을 의미한다.
같은 tab이어도 hover나 focus에 따라 css 효과가 달라질 때 이를 구분하기 위해 사용한다.

<ul class="tab">
  <li class="tab__item tab__item--focused">탭 01</li>
  <li class="tab__item">탭 02</li>
  <li class="tab__item">탭 03</li>
</ul>

해당 코드에서 --focused가 수식어에 해당된다.
이렇게 작성된 걸 boolean 타입이라고 하는데 그 값이 true 일 때 라고 가정하고 사용한다.

<div class="column">
  <strong class="title">일반 로그인</strong>
  <form class="form-login form-login--theme-normal">
    <input type="text" class="form-login__id"/>
    <input type="password" class="form-login__password"/>
  </form>
</div>
 
<div class="column">
  <strong class="title title--color-gray">VIP 로그인 (준비중)</strong>
  <form class="form-login form-login--theme-special form-login--disabled">
      <input type="text" class="form-login__id"/>
      <input type="password" class="form-login__password"/>
  </form>
</div>