CSS 선택자의 점수가 있다! (점수 환산표)

CSS 작업을 하다가 요소를 선택하는데, 적용이 되지 않았던 적이 몇 번 있었습니다. 그런데 그런 부분이 CSS 선택자에 대한 부분이란 걸 알았고, CSS 선택자에도 점수가 존재한다는 것을 알게 되면서 조금 찾아보고, 저와 같은 실수를 하지않았음에 정리를 해봤습니다.

 

* CSS 선택자 점수는?

• !important : 10,000점
• Inline Style: 1,000점
• ID 선택자: 100점
• Class 선택자: 10점
• Tag 선택자: 1점

위의 점수로 봤을 때는 그럼 !important 사용하면 되는거 아냐? 인라인 스타일 작성하면 되는 거 아냐? 라고 하지만, 막상 개인적인 작업이나 업무를 통했을 때 이렇게 작성을 하게 되면 수정(=유지보수)을 하는 부분에서 굉장히 어려움을 느낄 수 있습니다. 인라인 스타일은 일일이 다 줘야하고, 수정할 때 일일이 다 수정할 것인가? 그건 선택하기에 달렸지만, 인라인스타일은 일단, 비추박도록 하겠습니다.

 

<div class="app app1">
  <span>안녕하세요</span>
</div>

.app {
  width: 100px;
  height: 100px;
  background: red;
}

지금 위의 코드에서 선택자로 따졌을 때는 클래스 선택자를 사용했기 때문에 10점입니다. 하지만, 같은 요소를 색상만 바꾸려고 하면 클래스를 또 부여해도 상관은 없겠지만, 그렇게 되면 코드가 또 길어지기 때문에 클래스 선택자를 또 사용하여 점수를 높여서 색상만 바꿀 수 있게 됩니다.

.app.app1 {
  background: purple;
}

이렇게 부여함으로써 CSS 선택자 점수는 11점이 되었습니다. 그래서 적용이 background-color는 purple로 적용이 되게 됩니다. 같은 점수라면 나중에 적은 것이 부여가 되지만, 그렇게 되면 app의 속성은 계속 없어질 수도 있기 때문에 이렇게 선택자를 통해 점수를 높여서 CSS 속성값을 컨트롤 하는 방법도 있습니다.