CSS 특정성 (Specificity)

들어가며

지난 글에서 알아본 Cascade의 가장 중요한 부분중 하나인 특정성에 대해 더 자세히 알아보도록 하겠습니다. 특정성에 대해서 이해를 하게 되면 CSS 우선순위에 대해서 확실하게 파악할 수 있을 것입니다.

 

특정성 점수

각각의 CSS rule의 선택자는 특정성 점수를 가지게 되며, 점수가 가장 높은 CSS rule이 요소에 적요됩니다. 특정성 점수는 선택자의 종류에 따라 점수가 부여되며, 여러 선택자가 중첩되어 있는 경우, 모든 점수를 합한 총합이 최종 점수가 됩니다.

각 선택자의 점수

Universal selector(*): 0점

* {
  color: red;
}

element, pseudo-element selector: 1점

div {
  color: red;
}

::selection {
  color: red;
}

class, pseudo-class, attribute selector: 10점

.my-class {
  color: red;
}

:hover {
  color: red;
}

[href='#'] {
  color: red;
}

:not() 의 경우 점수는 없지만, 내부의 선택자의 점수는 중첩됩니다

div:not(.my-class) {
  color: red;
}
/* 총점 1(div) + 10(.my-class) = 11 */

ID selector: 100점

#myID {
  color: red;
}

Inline style attribute: 1,000점

<div style="color: red"></div>

!important rule: 10,000점

단, !important가 적용된 css 속성에 대해서만 10,000점입니다.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

 

마무리

Cascade의 핵심인 특정성 점수에 대해서 알아보았습니다. 이제 CSS 우선순위가 어떻게 계산되는지 알았습니다. 특정성 점수가 더 높은 스타일이 우선순위가 높으며, 만약 점수가 동일한 경우 더 하단에 정의된 스타일이 덮어씌우게 되는 것입니다.

 

실제 프로젝트에서는 '적절한' 점수를 가지는 CSS Rule을 작성하도록 노력해야합니다. 스타일이 적용될수 있을 만큼 점수가 높되, 추후 유지보수시 복잡성이 높아지지 않을 만큼 가능한 점수가 낮아야 합니다.