[HTML & CSS] 네이밍 규칙

 

  HTML 문서를 작성할 때 각 태그들을 구분하기 위해서 id 혹은 class가 주로 쓰인다. 이러한 속성들을 보다 효과적으로 쓰는 방법은 무엇일까 고민하며 구글링을 해보다 다음과 같은 아래와 같은 사이트를 찾게 되었다. 

 

 TPL+Code Style Guide

 

 

  이 사이트에서 정리한 내이밍 규칙은 아래와 표와 같다. 네이밍 규칙 외에도 코딩 컨벤션, 레이아웃 등에 관한 글이 있으니 참고하면 좋겠다.

 

공통 규칙	[ 형태 + 의미 + 상태 ] 순서로 조합한다.	-
	이름의 시작은 소문자 혹은 _ 만 사용한다.	-
HTML / CSS	id => camelCase 사용	menuMain
	class => - 사용(snake_case와 유사)	btn-login-off
File	[ 형태_의미_상태 ]와 같이 언더스코어를 사용한다. (CSS의 경우 되도록 한 단어로 그룹핑해 표현한다.)	home_main.html btn_search_on.jpg main.css