영어로 작성된 글을 번역하였습니다. 원문 보기
예전에 어디선가 스타일링 할 때 id대신 class를 사용하는 것이 좋다고 본 기억이 있었는데, 구체적인 이유를 알고 싶어서 구글링 해 보았습니다.
동료들의 코드를 리뷰할 때 CSS스타일에서 ID선택자를 쓰지 말라고 조언하는데 그러면 반드시 왜라는 질문을 받게 됩니다. 우리가 대기 줄을 서야 하거나, 새벽 6시에 어둠속에서 불도 안켜고 화장을 하는것을 안하는것 처럼 CSS에서 ID를 사용하지 않는 것은 내게 무의식적으로 일어납니다. 그래서 다른 사람들에게 이유를 설명하고자 한다면 고민하는 시간이 걸리기 때문에 ID를 사용하지 않는 이유를 생각해보았습니다.
1. Id의 우선순위가 Class보다 높다.
id선택자는 클래스보다 더 높은 우선순위를 가지고 있습니다. 클래스 자체는 id에 속한 스터일을 덮어쓸 수 없습니다. id를 이기려면 더 많은 id가 필요하거나 !importalnt를 사용하며 스타일시트 내에서 우선순위 전쟁을 벌어야 합니다. 이를 위해선 html을 수정해야 할 상황도 발생합니다. 유지보수와 확장성을 고려해 본다면 이러한 방법은 이상적이지 않습니다.
2. 클래스는 재사용이 가능하다.
id는 페이지 내에서 고유해야 합니다. id에 스타일을 추가 해 두면, 이 스타일을 재사용 해서 사용할 수 없습니다. 그러나 클래스는 동일한 웹 페이지내의 여러개의 HTML 엘리먼트들에서 나타날 수 있습니다. 스타일을 재사용 가능하다는 것은 CSS의 장점 중 하나입니다. 예를 들어 리스트 엘리먼트<li> 를 스타일링 할 때 id를 사용한다면 스타일하는것이 매우 어려울 것입니다. 반드시 모든 스타일들이 재사용 되어야 하는것은 아니지만 가능성을 열어두는것은 좋은 선택입니다.
3. Consistent Convention (일관성있는 규칙)
코드 베이스에서 작업하는 개발자들에게 클래스들은 CSS를 위한 것이고 ID는 개발자들이 사용하는 것이라고 인지하는것이 더 간단합니다. 오직 class 속성을 스타일을 지정할때만 사용하는이라고 사람들이 이해하는 것이 더욱 작업을 쉽게 만듭니다.
4. 하나의 엘리먼트는 단 하나의 ID만 가질 수 있습니다.
HTML 요소에 많은 클래스들을 추가할 수 있습니다. 예를 들면 이렇게요<div class="text-bold banner-text js-banner-text"></div>. 이 엘리먼트는 스타일링을 위한 클래스들이 여러개 있고 자바스크립트를 위한 클래스가 하나 있습니다. 모든 클래스들이 하나의 엘리먼트에 속해 있습니다. Id선택자로 이것과 동일한 id를 부여할 수는 있습니다. 그러나 하나의 엘리먼트당 하나 이상의 id를 부여하는것이 불가능하는 것을 기억하고 있어야 합니다. 이 말은 당신은 id를 오버로드 할 수 없습니다.
하나의 엘리먼트를 스타일 하기 위해서 여러 클래스를 사용 하는 것은 흔한 패턴입니다. 그리고 이러한 네이밍 컨벤션은 자바스크립트나 자동화 테스트에서 매우 좋은 아이디어입니다. 예를 들어, 내가 js-로 시작하는 클래스를 본다고 했을 때, 나는 이것은 js코드 어딘가에서 사용하며 스타일에는 사용되지 않는것을 알고 있으므로 이것을 수정하기 전엔 주의해야 하는것을 알 수 있습니다.
HTML 에서 ID를 사용하지 말란 말이 아님!
Id 는 CSS선택자 외에도 웹페이지 내에서 앵커나 식별자 등으로 많이 사용됩니다.
