CSS 네이밍 규칙

 

하이픈으로 구분 된 문자열 사용

자바 스크립트를 많이 작성하면 camel case의 경우 변수(variables)를 쓰는 것이 일반적입니다.
var redBox = document.getElementById('...')
좋다~, 맞지?

문제는이 형식의 명명이 CSS에 적합하지 않다는 것입니다.

이것을하지 마십시오 :

.redBox { border: 1px solid red; }

대신 다음을 수행하십시오.

.red-box { border: 1px solid red;

이것은 꽤 일반적인 CSS 명명 규칙입니다. 틀림없이 더 읽기 쉽습니다.
또한 CSS 속성 이름과 일치합니다

속성 추가에 따른 작성법

.stick-man__head { } .stick-man__arms { } .stick-man__feet { }.stick-man--blue { } .stick-man--red { }.stick-man__head--small { } .stick-man__head--big { }

---

다음은 다른 규칙들

1. 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)

잘못된 예

Tit_pop.html *-hidden-obj 03_btn_more.gif

올바른 예

tit-section

---

2. 네이밍의 조합은 '형태의미순서_상태'을 기본 순서로 사용한다.

잘못된 예

cancle_btn_off_01.gif, msgbox-off-toggle

올바른 예

btn_cancle_01_off.gif, msgbox-toggle-off

---

3. 네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.

잘못된 예

customerService

올바른 예

customer_service

---

4. 네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.

잘못된 예

hidden_obj

올바른 예

hidden-obj

---

5. 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.

잘못된 예

cyber_center_1, cyber_center_2

올바른 예

cyber_center_01, cyber_center_02

---

6. 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.

잘못된 예

box-type01, box-type02, box-type03

올바른 예

box-type, box-type02, box-type03

---

7. 레이아웃 예약어#wrapper - 페이지 전체 영역 그룹핑 #header - 머리글 영역 #container - 본문영역 그룹핑 #content - 주용컨텐츠 영역 #footer - 바닥글 #popWrapper - 팝업 페이지 전체 영역 그룹핑 #popHeader - 팝업 머리글 영역 #popContainer - 팝업 본문영역 그룹핑 #popContent - 팝업 주용컨텐츠 영역 #popFooter - 팝업 바닥글 #gnbNav - 글로벌 네비게이션 영역 메뉴 #lnbNav - 로컬 네비게이션 영역의 메뉴 #snbNav - 사이드 네비게이션 영역의 메뉴

---

출처 = velog.io/@naynara/%EB%94%94%EB%B2%84%EA%B9%85-%EC%8B%9C%EA%B0%84%EC%9D%84-%EC%A0%88%EC%95%BD%ED%95%98%EB%8A%94-css-%EA%B7%9C%EC%B9%99-cyjxv4tdlx