Cascading

📌 Cascade란?

CSS 작성중에 하나의 HTML 요소에 대해 서로 다른 스타일 규칙이 동시에 적용되는 상황이 발생할 때, 브라우저는 정해진 알고리즘에 따라 어떤 스타일을 최종적으로 적용할지 결정한다.
이 결정 과정이 바로 캐스케이드(Cascade)이다.
🌊 작은 폭포나 계단식으로 떨어지는 물 을 일컫는다.

✔ CSS는 바로 Cascading Style Sheet의 약어이다.

사이트의 복잡성이 증가함에 따라 스타일시트의 수가 증가하여,
스타일시트의 소스 순서가 더 중요하고 복잡해진다.
다양한 스타일 후보군중에서 내가 의도하는 방향으로 스타일을 적용하기 위해선 어떤 규칙으로 확정되는지 알 필요가 있다. 규칙은 다음과 같다!

📌 Cascading

브라우저는 스타일 충돌이 발생하면 다음의 단계를 거쳐 모든 요소의 모든 속성에 할당되는 값을 결정한다.

관련성: 각 요소에 대해 선택자가 일치하는 모든 선언 블록을 찾는다.
중요도: 일반 스타일인지 중요 스타일인지에 따라 규칙을 정렬한다.
✔ 중요 스타일은 !important 플래그가 설정된 스타일이다.
출처: 두 개의 중요도 버킷 각각 내에서 작성자, 사용자 또는 사용자 에이전트 출처별로 규칙을 정렬한다. 우선 순위는 작성자, 사용자, 사용자 에이전트(브라우저) 순이다 (일반 스타일의 경우).
✔ 두 개의 중요도 버킷은 각각 일반 스타일 선언, 중요(!important) 스타일 선언을 의미한다.
계층: 6개의 출처 중요도 버킷 각각 내에서, 종속 계층별로 정렬한다. 일반 선언의 계층 순서는 생성된 첫 번째 계층부터 마지막 계층까지이며, 그 다음에는 레이어가 없는 일반 스타일이 있다. 이 순서는 중요한 스타일에 대해 반전되며 레이어가 없는 중요 스타일의 우선 순위가 가장 낮다.
명시도: 우선 순위가 있는 계층의 경쟁 스타일에 대해 명시도별로 선언을 정렬한다.
✔ 명시도는 CSS 선언에 적용되는 가중치로 선택자가 얼마나 구체적인가에 따라 측정된다.
나타나는 순서: 우선 순위가 있는 출처 계층의 두 선택자가 동일한 특정성을 갖는 경우 가장 높은 특정성을 가진, 마지막으로 선언된 선택자의 속성 값이 우선한다.

💡 위 단계를 축약하여 3가지 우선순위인 중요도, 명시도, 코드 순서로 볼 수 있다!

📌 3단계 판별 기준

💡 중요도

가장 강력한 우선순위로, 다른 모든 규칙을 무시하고 강제로 스타일을 적용하고 싶을때 사용한다.
속성값 뒤에 !important 키워드를 붙이면, 명시도나 코드 순서와 상관없이 무조건 최우선으로 적용된다.
단, 이는 자연스러운 흐름을 깨트리는 기능이므로 사용을 지양한다!!🤢

다음과 같은 방식으로 사용할 수 있다.

<p class="text"> ... </p>

위와 같은 상황에서,

p {
	color: green !important; 
  }

.text {
		color: red; /*무시됨*/
      }

본래 p 태그는 클래스 선택자보다 우선순위가 낮다.
하지만 !important 키워드로 인해 color가 green으로 정해진다.

💡 명시도

중요도가 같다면, 선택자가 얼마나 구체적으로 요소를 지칭했는가를 따지게 된다.

다음의 순서로 명시도가 높다.
!important > #id (ID 선택자) > .class (클래스 선택자) > 유형 선택자

선택자의 유형과 개수에 따라 가중치가 더해지며, 제일 구체적일수록! 까다로울수록! 명시도가 높다.

🔎 점수 산정 기준

브라우저는 CSS 규칙을 읽을 때마다 명시도 점수를 산정한다. 이는 선택자가 얼마나 구체적인가를 수치화한 것.

명시도 점수는 (인라인 스타일, 아이디, 클래스, 태그) 의 숫자 그룹으로 표현되며, 왼쪽 자리에 있는 숫자가 클수록 무조건 우선순위가 높다.
선택자가 길어지면 각 구성 요소의 점수를 합산한다.
-> 예를들어, h2는 (0,0,0,1) .container .box 는 클래스가 2개이기에 (0,0,2,0) 이 된다.
또한, 두 선택자가 충돌할 때, 왼쪽 자리의 숫자가 높은 쪽이 무조건 승리하게 된다.
-> 예를 들어 #box는 (0,1,0,0) 이고 .container .box는 (0,0,2,0) 인 상황에서 아이디가 존재하는 #box가 이기게 된다!!
📌 아무리 점수가 높아도 더 왼쪽에 있는 선택자를 이길 수가 없다!

다음은 명시도를 계산해주는 웹사이트이다!
🔗명시도 계산기: CSS 규칙을 테스트하고 이해할 수 있는 대화형 웹사이트

💡 코드 순서

중요도와 명시도가 모두 같다면, 가장 아래쪽에 즉, 마지막에 작성된 코드가 이긴다.
CSS의 기본 성질인 "위에서 아래로 흐른다"는 원칙이 적용된다.
같은 선택자를 사용하여 스타일을 덮어쓸 때(Overriding) 해당 원리가 작동한다.

/* 1. 먼저 작성됨 */
h1 {
    color: tellow; /*무시됨*/
}

/* 2. 나중에 작성*/
h1 {
    color: green;
}

두 태그는 명시도가 같으나 green으로 적용된다.
이는 아래의 스타일이 나중에 적용되었기 때문이다!

참고: 🔗mdn - 종속 계층 ,
🔗mdn - 명시도