개발에서 가장 중요한 html 네이밍 컨벤션

실수를 통해 배우고 성장하자. 

 

HTML에서 CLASS이름을 짓는것을 굉장히 중요하다. 

나 뿐만아니라 다른 개발자들과 협업을 해야 하므로 또는 유지보수시에 혼란스러움과 불필요한시간을 줄일 수 있기때문에 naming은 굉장이 중요하다. 

저또한 이러한 실수로 많이 혼났기 때문에 다시 상기시키고자 다시한번 정리하겠습니다.

 

공통규칙

○ naming의 첫 시작에 숫자, 특수문자, 대문자의 사용은 지양한다.

1. ex) 2list_notice ( x )
2. list_notice2 ( o )

○ naming은 '형태_의미_상태' 순서로 조합하며, 3단계를 넘어가지 않도록 권장한다. 

1. ex) btn_apply_on, box_news, box_reply_open, use_yn, open_yn 등

id/class 규칙

○ id는 캐멜케이스, class는 언더스코어 방식으로 사용합니다. 

1. ex) id="btnSearch" ( x )
2. id="btnGnbSearch" ( o )

* id는 고유해야된다. 즉 같은 naming에 id가 여러개 있는것은 가급적 피한다. 

 

Element 

Block 내에 하의요소들의 클래스를 줄때는 

HTML에서
<header class="header">
   <div. class="header__title"></div>
   <div. class="header__icon"></div>
</header>

CSS
.header{ /*some style*/ }
.header__title{ /*some style*/ }
.header__icon{ /*some style*/ }

부모에 클래스에 header를주고 자식들에게 부모에 클래스명_요소들 에 이름으로 네이밍을 해주는것은 좋은 방식입니다.

 

 

 

 

 

참고 : https://saeatechnote.tistory.com/entry/class-name-%EC%A0%95%ED%95%98%EA%B8%B0