자바 스크립트를 많이 작성하면 camel case의 경우 변수(variables)를 쓰는 것이 일반적입니다.
var redBox = document.getElementById('...')
좋다~, 맞지?
이것을하지 마십시오 :
.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 {
}
잘못된 예
Tit_pop.html
*-hidden-obj
03_btn_more.gif
올바른 예
tit-section
잘못된 예
cancle_btn_off_01.gif, msgbox-off-toggle
올바른 예
btn_cancle_01_off.gif, msgbox-toggle-off
잘못된 예
customerService
올바른 예
customer_service
잘못된 예
hidden_obj
올바른 예
hidden-obj
잘못된 예
cyber_center_1, cyber_center_2
올바른 예
cyber_center_01, cyber_center_02
잘못된 예
box-type01,
box-type02,
box-type03
올바른 예
box-type,
box-type02,
box-type03
#wrapper - 페이지 전체 영역 그룹핑
#header - 머리글 영역
#container - 본문영역 그룹핑
#content - 주용컨텐츠 영역
#footer - 바닥글
#popWrapper - 팝업 페이지 전체 영역 그룹핑
#popHeader - 팝업 머리글 영역
#popContainer - 팝업 본문영역 그룹핑
#popContent - 팝업 주용컨텐츠 영역
#popFooter - 팝업 바닥글
#gnbNav - 글로벌 네비게이션 영역 메뉴
#lnbNav - 로컬 네비게이션 영역의 메뉴
#snbNav - 사이드 네비게이션 영역의 메뉴