id 셀렉터를 안티패턴으로 보는 시각

출처- airbnb styleguide
출처 - css guideline MDN

1) 재사용성과 유지보수 측면의 어려움

id 셀렉터는 지나치게 특수성이 높아 유일한 값으로 사용된다.

2) class로 모든 기능이 대체 가능

id로 할 수 있는 모든 것을 class로도 할 수 있기 때문에 class를 사용할 것을 추천한다.

data-* 속성으로 id 대체하기

1) data attribute란?

• HTML 요소에 화면에 안 보이게 글이나 추가 정보를 저장할 수 있도록 해주는 속성이다.
• 사용자가 원하는 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있도록 하는 방법이다.
• 이를 통해 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다.

• 모든 html요소에서 공통으로 사용할 수 있는 속성이다. 이러한 속성들은 Global attributes(전역 속성)이라고 부른다.

2) data-* 속성에 접근하기 - dataset

• getAttribute() 또는 dataset 속성을 통해 접근이 가능하며, dataset을 통한 접근이 권장되는 방법이다.

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.

<!--HTML-->
<article
  id="electriccars"
  data-id="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

// 위의 HTML을 자바스크립트에서 접근
var article = document.getElementById('electriccars');

article.dataset.id // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
article.dataset.parent = "motors" // 값 변경 가능

🚩
대시(-)들은 camelCase로 변환되는 것에 주의할 것
data-index-number => dataset.indexNumber로 변환됨

🚩
dataset 속성으로 가져온 값이 문자열일 경우 읽거나 쓸 수 있다.

문제점

dat attribute로 저장한 정보는 검색 크롤러 등에서 검색되지 않기 때문에 접근 가능해야하는 내용은 저장하지 않아야 한다.

결론

• id 속성은 사용하지 말자!
• 추가적인 정보를 지정할 필요가 있다면 data-id : "3" 과 같이 data-* 속성을 이용할 것