[Codeit Sprint]Weekly Paper 1-1: CSS Cascading 이란?

Cascading이란?

Cascading은 폭포, 위에서 아래로 쏟아지는이라는 뜻을 가진 단어입니다.
CSS는 Cascading Style Sheet의 줄임말입니다.
캐스케이딩 알고리즘은 여러 CSS 규칙이 동일 요소에 적용될 때 충돌을 해결하는 방법을 정의합니다.

CSS 캐스케이딩(Cascading) 이해하기

웹 개발을 하다 보면 하나의 HTML 요소에 여러 CSS 규칙이 적용되어 충돌하는 상황이 자주 발생합니다. CSS의 캐스케이딩(Cascading)은 이러한 상황에서 어떤 스타일 규칙이 우선 적용될지를 결정하는 핵심 개념입니다.

쉽게 말해, 여러 스타일 규칙이 “싸울” 때 누가 이길지 정하는 규칙의 규칙입니다. 캐스케이딩 원리를 정확히 이해하면 예기치 않은 스타일 충돌을 해결하고, 예측 가능한 방식으로 CSS를 설계할 수 있습니다.

button { color: red; }
button { color: blue; }

위 경우에는 두 규칙의 선택자(selector)와 중요도가 동일하므로, 나중에 선언된 규칙이 우선하여 버튼 텍스트는 파란색이 됩니다.
이처럼 CSS 캐스케이딩은 여러 규칙의 우선순위를 계산하여 최종적으로 어떤 스타일을 적용할지 결정해 줍니다.

CSS 캐스케이딩에서 고려되는 주요 요소는 네 가지입니다.

1. 스타일의 출처(Origin)
2. 중요도(Importance)
3. 특수성(Specificity)
4. 소스 순서(Source Order)

이제 각각의 원리가 구체적으로 어떤 역할을 하고, 실제로 어떻게 작동하는지 예제를 통해 알아보겠습니다.

1. 스타일의 출처

스타일의 “출처”란 해당 CSS 규칙이 어디에서 왔는지를 나타내며, 일반적으로 브라우저 기본 스타일, 사용자 스타일 시트, 개발자(Author) 스타일 시트 세 가지로 구분됩니다.

각각의 출처에 따른 기본 우선순위는 다음과 같습니다:

브라우저 기본 스타일 (User-Agent Stylesheet):

브라우저가 문서에 기본적으로 적용하는 스타일입니다. 예를 들어 대부분의 브라우저는 <a> 링크를 파란색으로, <h1> 헤더를 굵고 크게 표시하는 등 자체 기본 CSS를 가지고 있습니다.
이러한 스타일은 가장 우선순위가 낮습니다. 개발자가 정의한 어떤 규칙보다도 뒤로 밀립니다.

브라우저 기본 스타일은 여기서 확인할 수 있습니다...
https://www.w3schools.com/cssref/css_default_values.php

사용자 스타일 시트 (User Stylesheet):

사용자가 브라우저 설정이나 확장 등을 통해 적용하는 커스텀 CSS입니다. 예를 들어 사용자가 접근성 향상을 위해 모든 텍스트 크기를 크게 하는 사용자 CSS를 지정할 수 있습니다. 사용자 스타일은 브라우저 기본보다 우선하지만 실제로는 잘 사용되지 않는 경우가 많습니다

개발자 스타일 시트 (Author Stylesheet):

우리가 일반적으로 작성하는 CSS 파일, <style> 태그, 인라인 스타일 등이 여기에 해당합니다. 개발자 스타일은 기본적으로 가장 높은 우선순위를 가지며, 브라우저 기본 스타일이나 사용자 스타일을 덮어씁니다.

---

위 세 출처의 기본적인 우선순위 관계는 브라우저 < 사용자 < 개발자 순이며, 동일한 조건이라면 개발자의 CSS가 최종적으로 적용됩니다.

예를 들어 브라우저 기본 스타일 시트에 <strong> 요소를 굵게 표시하도록 정의되어 있어도, 개발자가 <strong>에 대해 font-weight: normal;을 지정하면 개발자 스타일이 적용되어 굵지 않게 표시됩니다. 마찬가지로 기본적으로 회색으로 표시되는 <mark> 태그도 개발자가 색상을 지정하면 그 스타일이 적용됩니다.

인라인 스타일(Inline Style)은 HTML 요소의 style="..." 속성으로 직접 지정한 CSS로, 이는 개발자 스타일의 일종입니다. 다만 인라인 스타일은 별도의 선택자가 필요 없으므로 가장 구체적인 규칙으로 간주되어 (특수성 부분에서 설명) 일반적인 개발자 CSS 규칙보다도 우선 적용됩니다.

<p style="color: blue"> => 인라인 스타일

2. 중요도 (Importance)와 !important

CSS에서는 특정 규칙에 “최고의 우선순위” 를 부여하기 위해 !important 키워드를 사용할 수 있습니다. 속성값 뒤에 !important를 붙이면 해당 선언은 다른 어떤 규칙보다도 중요하게 취급되어, 특수성이나 소스 순서를 모두 무시하고 최우선 적용됩니다.

예를 들어, .notice 클래스에 정의된 규칙에 !important를 붙이면, 그보다 구체적인 선택자나 뒤에 나오는 규칙이 있더라도 .notice의 스타일이 이기게 됩니다.

<p class="notice warning">경고 메시지입니다.</p>

<style>
  .warning { color: orange; }
  .notice { color: red !important; }
</style>

위 코드에서 <p> 요소는 두 개의 클래스(notice, warning)를 가지고 있습니다. 일반적으로 두 규칙 중 나중에 선언된 .notice가 적용되므로(소스 순서에 의해) 빨간색이 됩니다. 그런데 순서를 바꾸더라도 결과는 같습니다. 심지어 .warning이 ID이거나 더 높은 특수성을 가져도, .notice의 !important가 붙은 규칙이 무조건 우선 적용됩니다.
!important는 이처럼 특수성과 무관하게 해당 선언을 최우선으로 올려놓는 강력한 도구입니다.
하지만 남용하면 CSS 유지보수가 어렵고 예상치 못한 상호작용이 생길 수 있습니다. 실제로 개발자 스타일보다 사용자 스타일의 !important가 우선하는 등의 예외도 있으므로 꼭 필요한 경우에만 사용하는 것이 좋습니다.

일반적으로 동일한 요소에 여러 !important 규칙이 충돌하면, 그때는 다시 특수성과 소스 순서를 비교해 우선순위를 결정합니다.

3. 특수성 (Specificity)

특수성은 한 CSS 선택자가 얼마나 구체적으로 요소를 선택하는지를 수치화한 값입니다.
브라우저는 여러 규칙이 충돌할 때 특수성을 계산하여 더 구체적인 선택자의 규칙에 높은 우선순위를 부여합니다.
특수성은 흔히 네 자리 숫자 (또는 4개의 칸)로 표현하며, 앞자리가 클수록 더 높은 특수성을 뜻합니다.

• 인라인 스타일 (style="" 속성): 가장 높은 특수성으로 간주됩니다 (특수성 점수 1,0,0,0)

• ID 선택자 (#header 등): 그 다음으로 높습니다 (특수성 점수 0,1,0,0)

• 클래스 선택자, 속성 선택자, 가상 클래스 (.item, [type="text"], :hover 등): 중간 수준 (특수성 0,0,1,0)

• 요소(태그) 선택자, 가상 요소 (div, p, ::after 등): 가장 낮은 특수성 (특수성 0,0,0,1)
  전체 선택자 (*): 특수성 0으로 가장 낮습니다.

선택자가 복합적인 경우 각 구성 요소의 특수성을 더합니다. 단, 결합자(>, +, ~, 등)는 특수성 계산에 영향이 없습니다.

아래 예제는 ID 선택자와 클래스 선택자의 특수성 차이를 보여줍니다. 동일한 요소에 두 규칙이 적용될 때, 나중에 정의된 규칙이라도 특수성이 낮으면 우선순위에서 밀릴 수 있다는 점을 확인해 볼 수 있습니다.

<div id="notice" class="alert">중요 알림 메시지</div>

<style>
  /* ID 선택자 규칙 (특수성: 0,1,0,0) */
  #notice { background: yellow; }
  /* 클래스 선택자 규칙 (특수성: 0,0,1,0) */
  .alert { background: orange; }
</style>

4. 소스 순서 (Source Order)

마지막 결정 요소는 소스에서의 등장 순서입니다. 앞의 출처, 중요도, 특수성 모든 조건이 동일하거나 비교 대상이 없을 때, **나중에 나온 CSS 선언이 이전 것을 이깁니다】.

이를 “나중 것 우선의 원칙” 이라고도 합니다. 일반적으로 같은 파일 내에서는 아래쪽에 있는 규칙이 위쪽 규칙을 덮어쓰며, 여러 CSS 파일이 링크된 경우에는 나중에 불러온 파일의 규칙이 앞서 불러온 파일의 규칙을 이깁니다.
이미 앞선 예제들에서도 소스 순서의 영향이 언급되었는데요. 특수성과 중요도가 같다면 단순히 코드에서 뒤에 위치한 CSS가 적용됩니다.

예를 들어 다음과 같은 CSS가 있을 경우 .btn { color: white; } 규칙이 마지막에 있으므로 .btn 요소의 글자색은 흰색이 됩니다.

.btn { color: black; }
.btn { color: white; }  /* 나중에 선언됨 */

CSS 캐스케이딩 우선순위 정리

지금까지 살펴본 출처, 중요도, 특수성, 소스 순서의 작동 원리를 정리해 보겠습니다. 실제 브라우저는 이 모든 요소를 고려하여 최종 스타일을 결정하는데, 그 과정을 도식화하면 다음과 같습니다.

CSS 캐스케이딩 결정 과정에 대한 흐름도입니다. 우선 !important 규칙 여부에 따라 중요 규칙만 남기거나(normal 규칙만 남기거나) 한 뒤, 스타일의 출처 (브라우저 vs 사용자 vs 개발자) 단계에서 우선순위가 낮은 출처의 선언은 배제됩니다. 그런 다음 특수성을 비교하고, 마지막으로 소스 코드상의 순서를 비교하여 최종 승자가 결정됩니다.

이 흐름도는 한 요소에 적용 가능한 CSS 선언들의 우선순위 경쟁을 단계별로 보여줍니다.

좀 더 단순하게 기억하려면 다음과 같은 규칙으로 요약할 수 있습니다....

• 1순위: 중요도(!important) – 하나라도 !important가 있다면 다른 규칙보다 우선합니다.
  (단, 여러 !important 간에는 아래 기준을 다시 적용)

• 2순위: 스타일 출처 – 개발자 스타일 > 사용자 스타일 > 브라우저 기본 스타일 순으로 우선합니다
  (사용자 !important > 개발자 !important 등 중요도와 함께 고려)

• 3순위: 특수성 – 특수성이 더 높은 선택자의 규칙이 이깁니다.
  (ID > 클래스 > 요소 등)

• 4순위: 소스 순서 – 위 모든 조건이 같다면 나중에 나온 CSS 선언이 적용됩니다

이 네 단계는 CSS 캐스케이드의 기본 뼈대이며, 실제로는 여기에 상속(inheritance)이나 미디어 쿼리, 애니메이션 등의 상황이 추가로 섞일 수 있습니다. 예를 들어 CSS 애니메이션 중인 속성은 일시적으로 일반 규칙보다 우선하기도 하고, 부모로부터 상속된 값과 초기값(initial) 도 고려 대상이 될 수 있습니다. 하지만 이러한 것들은 특수한 경우이므로, 우선은 “중요도 → 출처 → 특수성 → 순서”라는 대원칙을 기억하면 대부분의 CSS 우선순위 문제를 해결할 수 있습니다.