BEM: CSS를 위한 HTML 클래스 명명규칙

 

 

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등

저마다의 명명규칙을 가지고 있는 것처럼

 

HTML 에도 명명규칙이 있다.

 

왜?

 

html 태그도 id와 class를 통해 관리하니까

쉽고 직관적인 네이밍이 중요하기 때문이다.

 

가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자.

 

 

BEM: Block Element Modifier

 

BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로

HTML 요소들을 block과 그에 포함된 element로 구분하고

거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다.

 

BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다.

오로지 class만을 사용한다.

 

왜?

 

selector 설정이 헷갈리지 않으니까.

 

아래에서 selector 설정이 헷갈리는 이유에 대해 잠시 살펴볼 건데,

관심이 없는 사람들은 바로 BEML 표기법으로 이동하자

 

바로 BEM 표기법 보기

 

 

CSS 및 javascript의 document.querySelector()를 이용하여

HTML의 태그요소에 접근하는 것을 생각해 보자.

 

selctor 코드:

id는 앞에 #을 붙이고 class는 앞에 "."을 붙인다.

 

<h1 class="test" id="basic"> hi </h1>

위의 HTML 요소를 가져오는 css 코드는 다음과 같다.

<!--id로 지정하기-->
#basic {}

<!--class로 지정하기-->
.text {}

 

자바스크립트에서 querySelector로 해당태그를 가져올 때 사용할 수 있는 코드는 다음과 같다.

// id명으로 가져오기

document.querySelector("#basic")

// class로 가져오기

document.querySelector(".test")

 

위의 코드들을 살펴보면 우리가 특정 HTML 요소를 가져오고 싶을 때,

미리명명해 둔 것이 class인지, id인지 미리 기억해놓아야한다.

 

id에는 # clss에는 . 을  붙여야 하니까.

 

별것 아닌일 같지만, HTML 요소가 많고 방대한 문서일수록

수많은 태그를 기억하기 곤란해진다.

 

 

그래서 개발자들은 그냥 class 속성만 써버리자는 결론을 내렸다.

 

 

 

BEM 표기법

 

Block

그냥 원하는 이름으로 표기한다

 

Element

소속 block 이름 + 두개의 언더스코어 + 엘리맨트이름으로 표기한다.

예시) block__element

 

Modifier

디자인이 적용될 block 이름 + 두 개의 대시 + 디자인 특성으로 표기한다.

예시) block--red

 

 

CSS 예시코드

/* Block 
*block, inline 할때 나오는 그 block이다.
*/

.btn {}

/* Element 
* block에 포함되어있는 요소들을
* 표현하는 클래스이름
*/

.btn__text {}
.btn__icon {}


/* Modifier 
* block별로 지정해줄 디자인을 나타내는 
* 클래스 이름
*/

.btn--small {}
.btn--red {}


/*** 위에서 .btn을 사용한 것 을 보면 알 수 있듯이
* 이 CSS를 사용하는 HTML의 모든 버튼은 class="btn"
* 속성을 갖게하기로 정했다.
*
* modifier은 개별 버튼에게 각각 다르게 부여하여
* 각각 다른 디자인을 갖게한다.
*/

실제 예시를 살펴보자.

<button class="btn btn--big">HI</button>
<button class="btn btn__text btn--small">HI</button>
<button class="btn btn--big btn--blue">HI</button>
<button class="btn btn__text btn--small btn--red">HI</button>

위의 HTML 코드를 보면 4개의 버튼이 각각 어떤 사이즈를 가지고 있는지

어떤 element에 변형을 주는지, 어떤 modifier가 적용되어 어떤 디자인을 가지고 있을지를 유추할 수 있다.

 

 

이제 직접 BEM을 적용한 HTML 및 CSS 코드를 살펴보자.

<style>
.btn {
border-radius-10px;
}

.btn__text {
color: green;
font-weight: bold;
}

.btn--big {
width: 100px;
height: 100px;}

.btn--small {
width: 30px;
height: 30px;}

.btn--blue {
background-color:blue;}

.btn--red {
background-color:red;}
</style>


<button class="btn btn--big">HI</button>
<button class="btn btn__text btn--small">HI</button>
<button class="btn btn--big btn--blue">HI</button>
<button class="btn btn__text btn--small btn--red">HI</button>

 

위의 코드를 실제로 구현하면 아래와 같은 모양새가 된다.

 

 

 

 

읽어주셔서 감사합니다.

 

오탈자나 오류는 댓글로 지적해 주세요.