CSS Naming Guidelines

Naming Guidelines

1. CSS 파일 네이밍
2. id/class 선택자 선언 규약
3. id/class 선택자 네이밍 가이드
4. Image 네이밍 규약
5. Image 네이밍 가이드

• (X) 허용 안함
• (△) 예외 허용
• (O) 적극 권장

1. CSS 파일 네이밍

CSS 파일을 여러개로 나누는 경우 HTTP 요청이 늘어나서 웹페이지 전송속도에 좋지 않은 영향을 주게 되므로 파일의 수는 최소한으로 유지합니다. 사이트 루트 디렉토리에 /css/ 폴더를 생성하고 전역에 쓰이는 파일의 이름은 default.css 으로 지정합니다.

/css/default.css
모든 스타일을 포함하는 파일

/css/popup.css 
팝업등 새로운 페이지 유형이 존재하는 경우 별도로 분리

2. id/class 선택자 선언 규약

아래와 같이 정형화 된 요소들에 대한 네이밍은 'id/class 선언규약'에 따릅니다. 단, 아래 예는 되도록 복잡한 상황을 재현한 것으로서 특히 #wrap, .colgroup과 같은 그룹핑은 필수적이지 않다면 제외하는 것이 바람직 합니다. 동일한 의미를 지닌 id/class 가 복수로 존재해야 하는 경우 선택자 뒤에 숫자를 붙여서 확장합니다. 예제보기.

#wrap : 감싸기

#header : 헤더

.gnb : Global Navigation Bar

.lnb : Local Navigation Bar

.search : Search Form

#container : 콘테이너

.spot : 강조하는 상위 콘텐츠

.snb : Side Navigation Bar

.account : 계정

.*nav*

.*section*

.ad : 광고

.colgroup : 컬럼 그룹핑

#content : 본문 표시

.path : 문서 경로 표시

.article or .section 
: 기사 또는 섹션 그룹핑

.article or .section 
: 기사 또는 섹션 그룹핑

.aside : 곁가지

.ad : 광고

.*nav*

.*section*

#footer : 풋터

• #wrap :

  페이지(#header, #container, #footer) 전체를 지정 합니다.

• #header :

  로고를 포함한 상단 영역(보통 .lnb 포함)을 지정 합니다.

• #container :

  #header 와 #footer 를 제외한 본문 전체를 지정 합니다.

• #footer :

  <address> 를 포함한 하단의 보조 네비게이션 영역을 지정 합니다.

• .gnb :

  최상위 공통 네비게이션(Global Navigation Bar)을 지정합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.

• .lnb :

  현재 서비스의 지역(Local Navigation Bar) 네비게이션을 지정 합니다. 보통 수평(bar)형태로 표현되며 #header 에 종속된다. 수직으로 표현되는 경우는 거의 드물지만 그러한 경우 #header 에 종속되지 않을 수도 있습니다.

• .search :

  현재 페이지의 주요 검색영역을 지정합니다.

• .snb :

  .gnb, .lnb 를 제외한 측면(Side Navigation Bar) 네비게이션 영역을 지정합니다. 보통 #container 에 종속되고 수직으로 표현되지만 수평으로 표현되는 경우도 있으므로 #header 에 종속되는 등 예외의 경우도 있을 수 있습니다.

• .account :

  로그인 폼 및 로그인 후 개인 계정을 표시하는 영역을 지정합니다.

• .colgroup :

  컬럼 형태의 내용블럭을 그룹핑 합니다.

• #content :

  반드시 #container 내부에 종속되며 보통의 경우 .snb 영역과 .aside 영역을 제외한 핵심 콘텐츠 영역을 지정합니다.

• .aside :

  문서의 주요 부분을 표시하고 남은 콘텐츠 영역(곁가지 메뉴 따위)을 지정합니다.

• .spot :

  강조하는 상위 콘텐츠이며 항상 #container 에 종속될 필요는 없습니다.

• .path :

  현재 페이지의 경로를 지정합니다. 보통 #container 또는 #content 에 종속됩니다.

• .*nav* :

  네비게이션 요소를 지정합니다. .gnb, .lnb, .snb 등 어떤 영역 내부에 하나 또는 복수의 네비게이션 요소가 존재할 때 .*nav* 클래스를 지정합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.

• .*section* :

  콘텐츠를 분할하거나 그룹핑 하는 블럭 입니다. 보통 #content 내부에 배치한 다음 heading 태그(h1~h6)와 함께 사용하는 것을 권장합니다. '*' 표시는 다른 단어 또는 숫자와 조합할 수 있다는 의미 입니다.

• .article :

  기사 또는 포스트와 같이 기술된 내용의 콘텐츠를 지정합니다.

• .ad :

  광고 또는 배너를 지정합니다.

• etc :

  여기서 기술하지 않은 id/class 네이밍은 이하 'id/class 생성 및 네이밍 가이드'에 따릅니다.

3. id/class 선택자 네이밍 가이드

• id는 화면을 분할 하거나 동적 UI를 구현해야 하는 경우에만 생성합니다. id사용이 필수적으로 요구되지 않는 요소는 class를 생성합니다.
• 영문 소문자만 사용 가능하며 숫자 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.
• 가능하다면 의미에 적합하고 직관적인 하나의 단어를 사용하고, 화면 배치 또는 시각적 효과를 의미하는 단어의 선택은 지양합니다.
• 2개 이상의 단어를 조합하는 경우 언더바(_)로 연결합니다. 단어와 숫자를 조합하는 경우 언더바(_)를 생략합니다.
• 숫자로 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다.
  .nav01 (X) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생 
.nav1 (O)
• 두문자어 또는 약어를 사용하더라도 직관적으로 이해할 수 있는 경우 단어를 축약할 수 있습니다.
• 보편적인 이름을 지닌 class는 항상 충돌 가능성이 존재하므로 가급적 부모 선택자에 종속 시킵니다.
  (△) .more 라는 클래스 이름을 더 이상 사용할 수 없음 
.more {...}

(O) .more 라는 클래스 이름을 여러번 재 사용할 수 있음 
.section .more {...}
.aside .more {...}
• 모든 영역에 동일한 표현으로 재 사용되는 전역 스타일인 경우 다른 선택자에 종속시키지 않습니다.
  .gnb fieldset{border:none;} (△) 전역 스타일을 특정 영역에 종속시켜 재 사용성이 떨어짐 
fieldset{border:none;} (O) 보통의 경우 fieldset을 이용하여 border를 표현하지 않으므로 어떤 선택자에도 종속시키지 않음

4. Image 네이밍 규약

아래 제시된 종류의 이미지 이름들은 각각의 목적에 맞는 형태로 사용될 수 있도록 예약되어 있습니다. 아래 표현들은 다른 목적으로 사용하거나 독창적인 형태로 변형하여 사용하지 않습니다. "*" 표시는 해당 이미지의 의미나 상태를 가장 잘 표현할 수 있는 단어로 치환하거나 또는 생략할 수 있습니다. 네이밍의 순서는 '대분류-중분류-소분류' 또는 '형태-의미-상태' 순입니다. 동일한 용도의 이미지가 여러개인 경우 마지막 단어에 숫자를 붙여서 다르게 네이밍 합니다.

분류	예약어		설명		권장표현
	형태	형태+의미+상태
제목	h*_*	h_*	불특정 레벨의 제목	제목 태그로 마크업되는 이미지 요소.	전경
		h1_*	제목 1
		h2_*	제목 2
		h3_*	제목 3
		h4_*	제목 4
		h5_*	제목 5
		h6_*	제목 6
문장	p_*	p_*	문장	통상 p 요소로 마크업되는 이미지 형태의 텍스트.	전경
네비게이션	gnb_*	gnb_*	글로벌	네비게이션 목적의 버튼 또는 탭.	전경
	lnb_*	lnb_*	로컬
	snb_*	snb_*	사이드
탭	tab_*	tab_*	탭	gnb, lnb, snb에 포함되지 않으며 탭으로 분류되는 버튼 또는 버튼의 배경.	전경/배경
버튼	btn_*	btn_list_*	목록	모든 종류의 버튼.	전경
		btn_read_*	읽기
		btn_write_*	쓰기
		btn_modify_*	수정
		btn_delete_*	삭제
		btn_reply_*	답변
		btn_cancel_*	취소
		btn_search_*	검색
		btn_find_*	찾기
		btn_registeration_*	등록
		btn_confirm_*	확인
		btn_submit_*	전송
		btn_upload_*	업로드
		btn_download_*	다운로드
		btn_install_*	설치
		btn_file_*	파일
		btn_stop_*	정지
		btn_play_*	실행
		btn_prev_*	이전
		btn_next_*	다음
		btn_up_*	위로
		btn_down_*	아래로
		btn_zip_*	우편코드찾기
		btn_go_*	페이지 이동
		btn_refresh_*	새로고침
		btn_open_*	열기
		btn_close_*	닫기
		btn_zoom_*	확대
		btn_reduction_*	축소
		btn_spread_*	펼치기
		btn_unfold_*	접기
		btn_lock_*	잠금
		btn_unlock_*	해제
박스	bx_*	bx_*_top	상단	상자의 선과 모서리 표현.	배경
		bx_*_mid	중앙
		bx_*_btm	하단
		bx_*_lt	좌상단
		bx_*_rt	우상단
		bx_*_lb	좌하단
		bx_*_rb	우하단
블릿	bu_*	bu_square	사각	의미를 포함하지 않는 장식적 bullet/icon 표현.	배경
		bu_circle	원형
		bu_arrow	화살
		bu_star	별
아이콘	ico_*	ico_num*	숫자	의미를 포함하는 장식적 icon 표현.	전경
		ico_english_*	영문
		ico_korean_*	한글
		ico_japanese_*	일어
		ico_chinese_*	중어
		ico_attention	주의
		ico_up	상향
		ico_down	하향
		ico_point_star	별점
		ico_star	별
		ico_new	신규
		ico_update	업데이트
		ico_reply	댓글
		ico_target_blank	새창
선	line_*	line_h	수평	보통 콘텐트를 구분하기 위한 목적의 실선 또는 점선.	배경
		line_v	수직
		line_s	슬래시
		line_bs	역슬래시
		line_h_dot	수평 점선
		line_v_dot	수직 점선
배경	bg_*	bg_body	전체	블릿, 버튼, 선 종류 이외의 배경처리 이미지. 보통 일러스트.	배경
		bg_head	상단
		bg_container	콘테이너
		bg_spot	스팟
		bg_footer	풋터
		bg_lnb	로컬 네비게이션
상태변화	*_off *_over *_on	tab_*_off	비활성	비활성/오버/활성 상태에 대한 표현.	전경/배경
		tab_*_over	오버, 포커스
		tab_*_on	활성
광고	ad_*	ad_*	광고	모든 종류의 배너 광고.	전경
임시	@*	@thumb	썸네일	통상 DB에서 불러오게되는 임시 이미지 요소.	전경
		@photo	사진
		@ad	광고

5. Image 네이밍 가이드

• 명명 순서 :

  큰 범주의 분류에서 작은 범주의 분류 순으로 명명합니다. 분류는 가급적 3단계를 초과하지 않도록 합니다. '대분류_중분류_소분류' 또는 '형태-의미-상태' 순으로 명명합니다.

  
  on_recommend_tab1.gif (X)
  tab1_recommend_on.gif (O) 탐색기에서 탭메뉴끼리 정렬되므로 빠르게 찾을 수 있습니다

• 단어 선택 :

  최대한 직관적이어야 하고 짧을수록 좋습니다. 가능하다면 이미지의 대체텍스트 역할을 수행할 수 있는 네이밍을 우선적으로 고려합니다.

  
  btn.gif (X) 어떤 의미의 버튼인지 직관성이 떨어집니다 
  btn_search_naver_mail.gif (X) 직관적이지만 지나치게 깁니다 
  bnms.gif (X) 너무 짧아서 의미를 유추하기 어렵습니다 
  btn_search_mail.gif (O) 적당히 짧으면서도 직관적입니다

• 허용 문자 :

  영문 소문자(abc)와 숫자(123) 및 언더바(_) 사용이 가능합니다. 영문 대문자 및 기타 언어와 특수문자는 사용하지 않습니다.

  Btn_Search.gif (X) 대문자가 사용되었습니다 
  btn-search.gif (X) 언더바 이외의 특수문자가 사용되었습니다 
  btn_search.gif (O)

• 조합 규칙 :

  '단어+단어', 또는 '숫자+숫자'는 언더바(_)로 조합합니다. 단어와 숫자를 조합하는 경우 언더바(_)는 생략합니다.

  tab1recommendon.gif (X) 단어 사이를 언더바로 조합하지 않아서 판독성이 떨어집니다 
  tab_1_recommend_on.gif (X) 단어와 숫자 사이의 언더바가 생략되지 않았습니다 
  tab1_recommend_on.gif (O) 단어 사이는 언더바로 조합하고 단어와 숫자 사이의 언더바는 생략 하였습니다

• 숫자 규칙 :

  숫자로는 시작할 수 없으며 숫자의 증가는 "1" 부터 시작됩니다. 숫자가 없는 단어는 통상 "1" 이라는 숫자가 생략된 것으로 간주합니다. 단, "01" 형식으로 시작되는 예외상황도 있을 수 있습니다.

  1btn_search.gif (X) 숫자로 시작되어 이미지의 용도와는 관계없이 탐색기에 정렬됨 
  num01.gif (△) 클래스 이름을 이용한 스크립트 작성시 1~9까지 예외적으로 "0"을 추가해야 하므로 구현 이슈 발생하나 예외상황 허용 
  btn_search1.gif (O) 동일한 의미를 지닌 이미지가 여러개인 경우 숫자를 붙여서 구분 합니다 
  btn_search.gif (O) 동일한 의미를 지닌 이미지가 없다면 숫자는 생략 합니다