Cascading 이란?

Cascading Style Sheet를 간결하게 우린 CSS 라고 부른다.

Cascade : (계단이 있는)작은 폭포, 폭포처럼 흐르다

© Wiroj Sidhisoradej on Freepik

cascade는 작은 폭포, 폭포처럼 흐른다는 뜻을 가진다. 개발에서는 이를 html tag와 element에 꾸밈요소들이 적용되는 규칙을 일컫는다. 폭포가 위에서 아래로 놓여진 돌들에 순서대로 그리고 중첩되어 흐르는 것 처럼 html tag와 element에 CSS 스타일이 규칙에 따라 적용된다.

캐스케이딩 규칙(Cascading Order)

우선 개발자 도구에서는 스타일창에서, 맨 윗쪽에 있는 규칙이 아래 있는 규칙을 덮어 쓴다고 본다.

1. style sheet의 종류
   User agent cheet는 우리가 만든 style sheet 보다 우선순위가 아래있다. html에서 스타일을 변경하는 방식인 inline style은 캐스케이딩에서 가장 우선순위가 높다.

2. 코드상의 순서
   똑같은 선택자를 쓰는 경우 나중에 쓴 수록 우선순위가 높다.
   예를 들면,

.greeting{
	color: #abcabc
}

.greeting{
	color: hotpink
}

라고 했을 때, 나중에 쓴 hotpink 스타일이 .greeting에 적용된다. 크롬 개발자 도구상에서는 스타일 섹션 윗쪽에 hotpink가 배치된다.

3. 선택자의 명시도(specificity)

https://specificity.keegan.st/ 이곳에서 명시도 계산과정을 볼 수 있다. 즉, 선택자마자 점수가 있고 점수가 높을 수록 우선순위가 높다는 말이다. vscode에 css파일에서 태그에 커서를 대면 (0,0,1)과 같이 숫자 세개가 괄호에 들어있다. 괄호 안에서 첫 번째 숫자는 ID의 갯수, 두 번째 숫자는 요소 갯수(클래스class, 속성attributes, 가상클래스pseudo-class), 그리고 세 번째 숫자는 요소(요소element와 가상요소pseudo-element)의 갯수를 보고 점수를 매긴다.
개발자도구 스타일 섹션에서 보면 더 윗쪽에 있는 스타일이 점수가 더 높다고 보면 된다.