HTML에서 class와 id를 사용하는 기준

 

class

CSS 속성을 줄 때 클래스를 이용합니다. 그 이유는 CSS 속성을 고치기 위해 class 명을 고치게 되어도 사이트 로직에 영향을 주지 않게 하기 위함입니다. 예를 들어 회사에 퍼블리서와 개발자가 따로 있다면 퍼블리셔 - 개발자 간의 협업을 할 때 서로 건드리는 부분을 달리 해서 서로의 작업에 영향을 주지 않도록 하는 것입니다.

 

id

Javascript 코드에서 querySelector를 지정할 때 사용합니다. 

 

 

class와 id를 구분 지어 사용하는 컨벤션의 장점과 단점

id와 class를 나누어 사용하는 컨벤션을 사용한다면 CSS를 바꾸거나, 로직을 변경할 때 id 혹은 class를 변경해도 영향을 덜 준다는 장점이 있습니다. 단점으로는 불필요한 id와 class를 만들어 사용하는 경우가 있겠습니다.

 

id와 class의 네이밍 규칙

처음에는 HTML의 id를 자바스크립트와의 일관성을 지키기 위해 카멜 케이스, class에는 CSS와의 일관성을 지키기 위해 케밥 케이스로 사용했습니다. 하지만 다른 개발자와의 대화를 통해 HTML의 id, class 모두 케밥 케이스로 통일하게 되었습니다. 이유는 HTML에서 작성하는 코드이므로 HTML의 네이밍 컨벤션을 통해 일관성을 지키려고 하였습니다. 

 

다른 사이트들을 보면 id를 케밥 케이스, 카멜 케이스, 스네이크 케이스 등 다양하게 사용하는 예시를 볼 수 있었습니다.

 

 

1. 구글 스타일 가이드 - 카멜케이스

https://google.github.io/styleguide/htmlcssguide.html#id_Attributes

Google HTML/CSS Style Guide

 

 

2. 스택오버플로우 - 케밥케이스

3. 네이버 - 스네이크케이스

 

4. 페이스북 - 스네이크케이스, 카멜케이스

 

 

5. 토스 - 케밥 케이스

 

 

 

id와 class의 네이밍 컨벤션 결론

id와 class 네이밍을 어떤 방식을 사용해도 상관없다고 생각합니다. 다만 팀으로 작업할 경우에는 작성하는 규칙을 정하는 것이 좋겠습니다. 그 이유는 이름 규약을 통일해야 팀원끼리 헷갈리지 않기 때문입니다.