CSS 네이밍 예시 ・ 팁

작업하다 보면 css클래스를 지정할 때 너무 생각이 아나 어떻게 지어야 할 때가 많다.

그래서 이번에는 css클래스명의 예시를 보여드리려 한다.

참고가 되시길,

(보통 많은 현장에서  BEM형식을 채택하고 있어서, BEM에 대해서 어렴풋이 알고 있기 때문에

차차 공부해 나가면서 블로그에도 소개하겠다)

<div class="1"></div>
 <div class="2"></div>
   <div class="3"></div>
   <div class="3"></div>
   <div class="3"></div>
 <div class="2"></div>

팁)

이런 식으로 있다고 생각했을 때

나는 보통 가장 바깥 div태그에는 안의 태그들을 아우르는 클래스명을 선언하고 

두 번째 태그부터는 BEM의 영향인지 바깥태그의 클래스명(1) + 언더바(__)를 붙이고 그다음으로 이 태그가 의미하는 

클래스명을 지정한다. '1__2' 이런식으로

 

3 클래스는 결국 '1__2-3' 이런 식이 될 것이다.   

 

맨 밑의 클래스 2는 위의 2와 다르게 ' 1__2・ ' 이런 식으로 다른 이름으로 정한다.

 

 

그렇다면, 이제 클래스명의 예시를 생각해 보자. 

 

단어	의미
section	구분, 장
container	전체를 감싸는 태그
wrapper	위와같음
outer	외측
contents	컨텐츠
step	단계
area	영역
header	끝단
group	묶음

클래스 1에서 주로 쓰는 클래스명들이 상위 태그에 있으면서 하위 태그들을 감싸는 역할을 하기 때문에 

영어의 복수나 여러 개를 의미하는 단어를 많이 쓴다.

 

단어	의미
title	제목
list	리스트
items	항목
img・pic	이미지
info	정보
date	날짜
btn	버튼
form	폼
table	표

topics	주제,화제
category	분류 카테고리
card	카드
contact	문의 QnA
announce	알림

주로 클래스 2에서 주로 쓰거나 상위에서도 쓸 수 있다고 본다. (참, 이 경계가 애매하긴 하다)

그 태그의 역할을 나타내는 단어로 쓰는 경우가 많다. 

 

단어	의미
text	글,텍스트
description	설명
notice	주의
item	항목
summary	요약
row	열, 가로
footer	끝
part	부분

클래스 2에서 쓰였던 복수형의 단어를 클래스 3에서 쓰는 경우도 있고,

조금 더 세부적인 의미의 단어들을 사용한다. 

 

 

이상, 위의 예시들이 조금은 도움이 되었기를..