CSS 스타일링에선 ID 선택자를 쓰지 말아야 하는 이유 4가지

1. 개요

우테코 미션을 진행하면서 고민이 하나 생겼다. CSS 스타일링을 하면서 태그의 id를 가져와 할 것인지? class를 가져와 할 것인지?에 대한 고민이었다.

우선 우테코 미션에서는 id를 가져와 CSS 스타일링을 많이 진행하였다. 중복되는 스타일만 class로 가져와 했을 뿐, 나머지는 id 또는 어트리뷰트로 접근하였다. 과연 이러한 접근이 옳은 것인지 궁금하였고 이후 미션을 마무리한 뒤, 여러 크루들에게 CSS 스타일링을 위해 태그의 id, class 중 어떤 것을 가져왔는지 물어봤다. 모두 나와 반대로 class선택자를 사용했다고 한다. 명확한 이유가 궁금하여 여러 글을 찾아보고 있는데 도밥이 좋은 글을 보내주어서 이를 보고 정리하고자 한다.

2. 첫번째 이유 - class의 우선순위는 id의 우선순위 보다 낮다.

이 말이 무슨 뜻이냐?

아래와 같은 코드가 있다고 생각하자.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      #title {
        color: blue;
      }

      .red-text {
        color: red;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1 id="title" class="red-text">타이틀</h1>
  </body>
</html>

타이틀은 파란색이 된다. 타이틀의 class를 red-text로 정하고 이를 위한 스타일도 있지만 id에 적용된 스타일이 우선적용되기 때문에 class로 접근하여 스타일링한 것은 반영이 되지 않는다.

이것이 바로 id의 우선순위가 더 높다는 뜻이다. 이를 해결하기 위해선 !important;를 추가 작성하여 우선순위를 높여야 한다. 혹은 html을 수정해야 하는 상황도 발생할 수 있다. 잦은 html 변경과 우선순위를 정하기 위한 !important의 무분별한 사용은 규모가 커지면 커질수록 유지보수, 확장성에 악영향을 주게 된다.

3. 두번째 이유 - 재사용할 수 있는 가능성이 있다.

class는 중복가능하다. 이러한 특징 때문에, 같은 스타일이라면 하나의 클래스로 만들어 필요한 태그에 사용할 수 있는 편리함이 있다. 반대로 id는 페이지 내에서 단 하나만 존재해야 하기 때문에 불가능하다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      .blue-text {
        color: blue;
      }

      .red-text {
        color: red;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1 class="red-text">타이틀</h1>
    <p>안녕하세요!</p>
    <p class="red-text">반갑습니다!</p>
    <p class="blue-text">노아입니다!</p>
    <p>또봐요!</p>
  </body>
</html>

위의 예제처럼 특정 스타일이 필요한 태그에 만들어둔 class를 가져다 스타일링을 쉽게 할 수 있다. 모든 스타일이 재사용되진 않지만 가능성은 충분히 있으므로 가능성을 열어두는 것이 좋다.

4. 세번째 이유 - 다수의 class를 가질 수 있다.

HTML 앨리먼트는 다수의 class를 가질 수 있다. 반대로 id는 단 하나만 가져야 한다. 때문에 여러 스타일로 조합하여 앨리먼트를 꾸미기 위해선 class가 적합하다.

아래와 같은 스타일이 있다.

텍스트 칼라를 빨간색으로 해주는 스타일(text-red라는 클래스로 관리)
텍스트 굵기를 bold로 해주는 스타일(text-bold라는 클래스로 관리)

위 두개의 스타일을 모두 적용하기 위해선 class="text-red text-bold"로 해주면 된다!

5. 네번째 이유 - 일관성이 있는 규칙이 필요하다.

CSS를 다루기 위해선 class로 접근하고 id는 다른 목적이 있을 때, 접근하는 것으로 규칙을 정하면 간편하게 여러 사람들과 작업을 진행할 수 있다.

6. Conclusion

평소에 자주 쓰던 방법이 이유였다. 이젠 id로 굳이 가져와서 스타일을 꾸밀 필요가 없다. class로 통일하도록 하자.

참고

CSS 스타일링에서 ID선택자를 쓰지 말아야 할 이유

📅 2023-03-05

PreviousGrid Layout Next실행 컨텍스트(execution context)

Last updated 1 year ago