네이밍 가이드(Naming Guide) - css 배우기

Naming Guide

다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다.

• Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다.
• Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다.
• Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다.

Naming 표기법

- 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 (Block Element Modifier) 이해하기

https://getbem.com/naming/

BEM 네이밍 규칙은 CSS 개발의 중요한 측면인 유지보수 가능한 코드베이스를 만드는 규칙을 제공합니다.

• 이러한 규칙은 프로젝트의 모든 개발자가 일관된 방식으로 작업할 수 있도록 합니다. 이는 프로젝트의 코드베이스가 커지고 여러 사람이 참여할 때 특히 중요합니다.
• 구조화된 네이밍 접근 방식을 채택함으로써, BEM은 개발 속도 향상, 디버깅 단순화, 레거시 코드에 새로운 기능 통합을 용이하게 합니다.

- 블록(Block)

• Block은 자체적으로 의미가 있는 독립적인 개체를 나타냅니다.
• 블록들은 의미적으로 동등하며, 우선 순위나 계층 구조가 없습니다.
• 블록들은 중첩되고 서로 상호 작용할 수 있습니다.

블록의 네이밍 규칙

• 소문자, 숫자, 대시를 포함할 수 있습니다.
• 네임스페이싱을 위해 .block 접두사 사용.
• 긴 블록 이름의 공백은 대시로 대체.
• 예: HTML에서 <div class="block">...</div>, CSS에서 .block { color: #042; }.

<div class="slide"></div>

- 요소(Element)

요소는 블록의 구성 요소로, 자체적인 의미는 없고 그 블록에 의미적으로 연결됩니다.

요소의 네이밍 규칙

• 소문자, 숫자, 대시 및 밑줄을 포함할 수 있습니다.
• 블록 이름, 두 개의 밑줄, 요소 이름을 결합하여 CSS 클래스를 형성: .block__elem.
• 예: HTML에서 <div class="block"><span class="block__elem"></span></div>, CSS에서 .block__elem { color: #042; }.

<div class="slide">
    <div class="slide__item"></div>
    <div class="slide__item"></div>
    <div class="slide__item"></div>
</div>

- 수정자(Modifier)

수정자는 블록이나 요소에 플래그를 사용하여 외관, 행동 또는 상태를 변경하는 데 사용됩니다.

수정자의 네이밍 규칙

• 소문자, 숫자, 대시 및 밑줄을 포함할 수 있습니다.
• 블록이나 요소 이름에 두 개의 대시를 결합하여 CSS 클래스를 형성: .block--mod 또는 .block__elem--mod.
• 예: HTML에서 <div class="block block--mod">...</div>, CSS에서 .block--hidden { }.

<div class="slide slide--active">
    <div class="slide__item slide__item--active"></div>
    <div class="slide__item"></div>
    <div class="slide__item"></div>
</div>

- 실제 예시

수정자와 요소가 있는 폼을 고려해 보세요:

<form class="form form--theme-xmas form--simple">
    <input class="form__input" type="text" />
    <input class="form__submit form__submit--disabled" type="submit" />
</form>

prefix/subfix/suffix 정의

후보자

• 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다.
  1. ex) tab_notice, tbl_product 등

prefix

분류별 Prefix 부가설명

분류	prefix	부가설명
타이틀	tit	일반적인 타이틀
영역	section	제목 태그(Heading Tag)를 지닌 영역 구분 (선택적 사용, 중첩사용 지양)
wrap	일반 영역의 묶음 (선택적 사용, 중첩사용 지양)
inner	부모 wrapper 가 존재하며 자식 묶음이 단독으로 필요한 경우
내비게이션	gnb	서비스 전체 내비게이션
lnb	지역 내비게이션(gnb 영역)
snb	사이드 내비게이션(좌측메뉴)
탭	tab
테이블	tbl
목록	list	일반 목록(ul, ol, 리스트 형식의 dl)
폼	tf	textfield (input 타입 text / textarea)
inp	input 타입 radio, checkbox, file 등
opt	selectbox
lab label
fld	fieldset
버튼	btn
박스	box
아이콘	ico
선	line_방향	일반 실선
line_dot_방향	점선
배경	bg
섬네일 이미지	thumb
페이징	paging
배너	bnr/banner
텍스트	txt	일반 텍스트
txt_bar	구분선 텍스트
num	ex) num1, num2, ... - 숫자 사용 시 언더바(underscore) 사용 X
copyright
time	날짜 및 시간
강조	emph
링크	link	일반 링크
link_more	더 보기 링크
순서	fst, mid, lst
팝업	popup
레이어	layer
광고	ad
스페셜	spe	검색 스페셜 용도
위젯	widget_소재명
상세내용	desc
댓글	cmt

---

subfix

하부 기호로서 subfix는 prefix와 함께 부가설명 용도로 사용한다.

1. ex) ico_arr_news.gif

분류별 subfix 부가설명

분류	subfix	부가설명
공용	comm	전역으로만 사용
위치변화	top/mid/bot/left/right
순서변화	fst/lst
그림자	shadow
화살표	arr
버튼상태변화	nor
방향	hori/vert
카테고리	cate
순위	rank

---

suffix

접미사를 의미하는 것으로, prefix와 함께 부가설명 용도로 사용하며 주로 상태를 나타내는 데 사용된다.

1. ex) btn_confirm_on, btn_prev 등

분류별 subfix 부가설명

분류	suffix
상태변화	_on / _off / _over / _hit / _focus
위치변화	_top / _mid / _bot / _left / _right
순서변화	_fst / _lst
이전/다음	_prev / _next