CSS Naming Conventions BEM

CSS를 작성하다 보면 이름짓기에 의외로 어려움을 겪는 경우가 많습니다.

여러번의 프로젝트를 수행하다 보면 본인만의 스타일로 클래스명을 짓게되는데,
협업..특히 외주업체나 프리랜서 분들과 작업을 하다보면 자신만의 스타일을 고집하기도 애매한 경우가 허다합니다.

여기, 

좋은 CSS Naming Convention을 소개합니다.

BEM은 크게 Block로 영역짓고, Element로 지정하며, Modifier로 상태를 표시합니다.

.block {}

.block__element {}

.block--modifier {}

즉, __를 쓰는 경우와 --를 쓰는 경우를 분리한 것인데,

__는 명사와 같은 이름을 사용합니다. (__button, __title, __menu 등)

--는 동사와 같은 상태를 이름으로 사용합니다. (--active, --disabled, --full 등)

예를 들겠습니다.

<div class="search">

    <button class="search__btn search__btn--active">BUTTON</button>

    <button class="search__btn search__btn--disable">BUTTON</button>

</div> 

이해가 좀... 되시나요?

먼저 하나의 구성요소를 지정합니다. (.팝업 {})

구성요소에 Child, Element, Component들이 있다면 그 이름을 명시합니다. (.팝업__제목 {})

구성요소가 하는 일이 있으면 -- 로 지정합니다. (.팝업--오픈 {})

.팝업 {}

.팝업__제목 {}

.팝업--오픈 {}

.팝업--오픈__제목 {}

.팝업__제목--오른쪽__버튼 {}

이런식으로 작성이 되는 것입니다.

왜 이렇게 하는지 잘 이해가 안될 것입니다.

비교해보겠습니다.

<div class="popup full open">

<h1 class="title">타이틀</h1>

<div class="body">

// 내용 

</div>

</div>

일반적으로 적용하는 클래스 네이밍 룰입니다.

이것에 BEM 방식을 적용해 보겠습니다.

<div class="popup-wrap popup-wrap--full popup-wrap--open">

<h1 class="popup-wrap__title">타이틀</h1>

<div class="popup-wrap__body">

// 내용

</div>

</div>

어떤가요?

또 다른 예를 들어보겠습니다.

<div class="notice">

    <img src="logo.png" alt="logo" class="img-rev">

    <div class="body">

        <h3 class="title">타이틀</h3>

        <p class="text">컨텐츠 설명글</p>

    </div>

</div>

조금씩은 다르겠지만 일반적으로 CSS 이름을 준 예시입니다.

이것을 BEM 방식으로 적용해보겠습니다.

<div class="notice">

    <img src="logo.png" alt="logo" class="notice__img--rev">

    <div class="notice__body">

        <h3 class="title">타이틀</h3>

        <p class="text">컨텐츠 설명글</p>

    </div>

</div>

어떤가요?

조금더 직관적으로 코드 확인이 쉽지 않나요? 저만 그런가요?

또한 이렇게 작업할 경우 클래스명이 중복될 확률이 낮아질것입니다.

공통 요소에 BEM 방식을 적용하는 것은 옳지 않을수도 있습니다.

또, 모든 요소에 BEM 방식을 적용하기에 어려운 점도 많습니다.

header나 Nav, Footer 등 구역을 지칭하는 것들은 보통 일반적인 위치에 존재하기 때문에 굳이 BEM 방식을 적용하지 않아도 직관적으로 소스파악하는데 어렵지 않는 것처럼요.

BEM은 하나의 특정영역에 클래스만으로 영역의 형태나 상태를 파악하는데 좀더 직관적이고 좀더 쉽게 알아보기 위한 도움의 역할로서 사용되는데 의미가 있을 것입니다.

.logo {}

.logo--festival {}

.logo라고만 있는것보다는 logo--festival 이라는게 좀더 의미를 파악하기가 쉬운것처럼 말이죠.

ClassNaming Rule 에 정답은 없습니다.

그러나 좀더 심플하고 좀더 쉽고, 좀더 사용하기 편하게 이루어져야 한다는건 두말할 필요가 없지요.

그 수많은 방법 중에 하나인 BEM을 소개했습니다.

이 방식이 자신만의 룰을 만드는데 도움이 되었으면 좋겠습니다.