Specificity??

CSS Specificity는 스타일 규칙이 적용되는 우선순위를 결정하는 방법입니다. 각 선택자에는 특정성 값이 있으며, 이 값이 높을수록 해당 스타일 규칙이 우선적으로 적용됩니다. CSS Specificity는 다음과 같은 순서로 계산됩니다.

1. 인라인 스타일(Inline Styles): HTML 요소에 직접 적용된 스타일은 가장 높은 우선순위를 갖습니다.
2. ID 선택자: #으로 시작하는 ID 선택자는 다음으로 높은 우선순위를 가집니다.
3. 클래스 및 속성 선택자: .class, [attribute]와 같은 선택자는 ID 선택자보다 낮은 우선순위를 갖지만, 태그 선택자보다는 높은 우선순위를 갖습니다.
4. 태그 선택자: div, p와 같은 태그 선택자는 가장 낮은 우선순위를 갖습니다.
   Specificity 계산 방법

특정성 값

CSS Specificity는 각 선택자의 특정성 값을 계산하여 결정됩니다. 특정성 값은 다음과 같이 계산됩니다.

인라인 스타일: 1000
ID 선택자: 100
클래스, 속성, 가상 클래스 선택자: 10
태그 선택자, 가상 요소 선택자: 1
특정성 값은 각 카테고리의 개수를 세어 합산합니다. 예를 들어, div.box라는 선택자는 클래스 선택자 1개와 태그 선택자 1개로 이루어져 있으므로 특정성 값은 11이 됩니다.

Specificity 규칙

CSS Specificity에 대한 몇 가지 규칙이 있습니다.

더 구체한 선택자가 우선권을 갖습니다.
특정성 값이 같으면 나중에 선언된 스타일이 우선권을 갖습니다.
!important를 사용한 스타일은 다른 모든 스타일을 무시하고 우선적으로 적용됩니다. 하지만 !important는 가능한 피하는 것이 좋습니다.

Specificity의 활용

CSS Specificity를 이해하면 코드의 예상치 못한 동작을 방지할 수 있습니다. 또한, 특정 스타일이 다른 스타일에 우선하여 적용되는 이유를 이해할 수 있습니다. 올바른 Specificity를 활용하여 코드를 작성하면 유지보수가 더 쉬워집니다.

마치며

CSS Specificity는 CSS를 더 효율적으로 작성하고 관리하는 데 도움이 되는 중요한 개념입니다. 이를 잘 이해하고 활용하면 코드의 일관성을 유지하고 예상치 못한 버그를 방지할 수 있습니다.