📚 CSS 규칙 순서의 핵심: Cascade의 이해와 활용
앞선 글 Outro에서 CSS 선택자를 과도하게 복잡하게 사용하면, 가독성이 떨어지고 오히려 수정에 어려움이 있을 수 있다라고 언급하였었다. 그 이유는 바로, CSS 규칙에는 '순서'가 존재하기 때문이다. CSS 규칙 순서에 대해서 파악하기 위해서는 Cascade의 개념에 대한 이해가 필요하다.
그래서 오늘은 CSS 규칙 순서의 핵심, Cascade에 대해 알아보고자 한다.
캐스케이드(Cascade)
📌 캐스케이드(Cascade)란?
CSS에서 캐스케이드(Cascade)는 스타일 규칙을 순서에 따라 합쳐서 적용하는 방식을 의미한다. 캐스케이드는 우선순위가 높은 규칙을 우선적으로 적용하여 최종적으로 어떤 CSS 속성을 적용할지 결정한다.
📌 스타일 시트의 종류
스타일 시트의 종류에는 브라우저 기본 스타일시트(User Agent Stylesheet)와 사용자가 작성한 스타일시트(Author Stylesheet)가 있다. 이 때, 브라우저 기본 스타일시트는 사용자 스타일시트보다 우선순위가 낮다.
예를 들어, 브라우저 기본 스타일시트(User Agent Stylesheet)에서 h2태그의 폰트 사이즈가 font-size: 12px; 라고 가정해보자. 그리고, 사용자가 작성한 스타일시트(Author Stylesheet)에서는 h2태그의 폰트 사이즈가 font-size: 24px; 라고한다면, h2태그의 폰트 사이즈는 어떻게 될까?
사용자가 작성한 스타일시트(Author Stylesheet)가 브라우저 기본 스타일시트(User Agent Stylesheet)의 우선순위보다 높기에 h2태그의 폰트사이즈는 24px로 적용 될 것이다.
📌 코드 상의 순서
같은 선택자에 대한 규칙이라도, CSS 파일 내에서 나중에 정의된 규칙이 우선순위가 높다.
아래와 같은 코드에서,Hello world의 폰트사이즈는 24px로 적용되게 된다.
<span class="hello">Hello world</span>.hell0 {
font-size: 12px;
}
.hello { /* 나중에 정의된 규칙의 우선순위가 더 높다 */
font-size: 24px;
}📌 명시도
명시도란 CSS 선언에서 적용되는 가중치로, 각 선택자 유형의 수에 따라 명시도 점수가 매겨진다. 아이디 개수, 클래스 개수, 태그 개수를 합산하여 점수를 매긴다. 명시도 점수는 아이디 개수, 클래스 개수, 태그 개수순서로 count하여 점수를 비교한다.
추가적으로 명시도 점수가 같을 경우, 앞서 언급한 코드 상의 순서로 CSS 적용 요소가 결정된다.
#id { /* ( 1, 0, 0 ) */
font-size:21px;
}
.class { /* ( 0, 1, 0 ) */
font-size:21px;
}
div { /* ( 0, 0, 1 ) */
font-size:21px;
}
#id.class { /* ( 1, 1, 0 ) */
font-size:21px;
}
#id#id2{ /* ( 2, 0, 0 ) */
font-size:21px;
}명시도 점수에 대한 계산은 아래 사이트를 통해서도 계산 가능하다.
Specificity Calculator: https://specificity.keegan.st/
📌 상속
CSS 속성 중 일부는 부모 요소에서 자식 요소로 상속된다. 상속된 속성의 우선순위의 경우, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.
나의 경우, 상속되는 속성에 대해 알아보고자 할 때 MDN에서 "Inherited"를 확인하여 해당 속성이 상속되는지 안 되는지 확인한다. 모르는 부분에 대해 공식문서를 확인하는 습관을 꾸준히 들여보자.
ex> Font-Family 검색 결과
- 상속된 속성의 우선순위: 가까운 조상에게 물려받은 속성일수록 우선순위가 높다.
- 상속되는 속성: color, font-family, font-size, font-weight, line-height, text-align 등
Outro
CSS를 사용하다보면, CSS의 적용이 내 마음대로 안되는 경우가 매우 많았다. 그 때마다 불필요한 클래스를 추가하거나, 너무 복잡하게 선택자를 조합하여 당장의 문제를 급급하게 해결하고, 이로 인해 코드를 수정할 일이 생겼을 때 더 큰 악순환을 불러일으켰던 것 같다.
오늘 CSS 규칙의 핵심 Cascade에 대해 살펴보며 이러했던 과거 나의 모습에 대해 많이 반성하게 되었다. 앞으로는 오늘의 반성을 바탕으로 우선순위에 대한 명확한 이해를 바탕으로 보다 직관적이고 효과적인 CSS 스타일링을 실천해보자.
