Publishing/CSS3

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

oodada 2023. 11. 26. 11:54

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

'Publishing > CSS3' 카테고리의 다른 글

layout 관련 속성 - css 배우기  (0) 2023.12.01
css의 기초 - css 배우기  (0) 2023.11.29
dd  (0) 2020.10.20
웹폰트 만들기  (0) 2020.10.08
이미지 해상도 분기대응  (0) 2020.10.05
티스토리 친구하기