CSS의 Cascading 탐구하기

종속형 스타일 시트(Cascading Style Sheets, CSS)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어입니다.

브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어져 있습니다.

 

인용 출처 : CSS - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

---

 

그러면 Cascading이란 무엇일까요?

MDN Docs에서 찾아봤습니다.

CSS 캐스케이드 소개 - CSS: Cascading Style Sheets (번역기)

 

MDN Docs에 따르면,

Cascade는 사용자 에이전트가 서로 다른 소스에서 생성된 속성 값을 결합하는 방법을 정의하는 알고리즘입니다.

 

이렇게 들어서는 이해가 잘 안돼서, 한국어로 정리된 자료를 찾아봤습니다.

 

---

캐스케이드는 CSS에서 한 요소에 여러 개의 스타일이 적용될 때, 어떤 스타일이 우선 적용될지 결정하는 규칙을 의미합니다.

 

CSS 캐스케이드는 스타일의 우선순위를 결정하여, 여러 개의 스타일이 충돌하더라도 개발자가 웹 페이지의 레이아웃과 모양을 제어할 수 있게 해 줍니다.

 

인용 출처 : CSS CASCADE 적용 순서 및 특수성(Specificity) 알아보기

CSS CASCADE 적용 순서 및 특수성(Specificity) 알아보기

 

---

위 출처에 따르면, CSS 캐스케이드에서 중요하게 고려되는 요소는 다음과 같습니다.

1. 특수성(Specificity) : 특정 요소를 선택하는 선택자가 얼마나 `구체적`인지 결정합니다.
2. 중요도(Importance) : `!important` 선언은 스타일 규칙에 가장 높은 우선순위를 부여합니다.
3. 출처 순서(Source order) : `나중에 선언된 스타일`이 먼저 선언된 스타일보다 우선 적용됩니다.

 

■ `!important` 라고 지정된 요소가 가장 우선순위가 높습니다.

p {
  color: blue !important;
}

 

■ 인라인 스타일이 두번째로 우선순위가 높습니다.

<p style="color: blue;">This is a blue paragraph.</p>

 

■ 세번째 우선순위 : ID 선택자

■ 네번째 우선순위 : 클래스 선택자, 속성 선택자, 가상 클래스

■ 다섯째 우선순위 : HTML 태그 선택자(div, p 등), pseudo-elements(::before 등)

 

---

이 우선순위는 넘버링 시스템 공식에 의해 정해집니다.

// 넘버링 공식
specificity = a*100 + b*10 + c

 

여기서 a는 ID 선택자,

b는 클래스 선택자, 속성 선택자, 가상 클래스,

c는 요소(즉, HTML 태그 선택자) 입니다.

 

인라인 스타일이 지정된 경우는 1000점을 줍니다.

!important 라고 지정된 스타일은 넘버링 시스템을 무시하고 가장 높은 점수를 가집니다.

 

그리고, 특수성(구체적인 정도)은 동일한 스타일 규칙 내에서만 적용되며, 다중 스타일 시트에 걸쳐 적용되지 않습니다.

 

---

또한, !important 내에서도 우선순위가 있습니다.

• 1순위 : transition
• 2순위 : animation
• 3순위 : font-size, background, color ...

!important 내에서도 우선순위를 가지는 이유는 브라우저의 비주얼 상태에 영향을 크게 끼치기 때문입니다.

 

---

출처 순서(Origin Source)는 HTML의 구조상 맨 위에 나오는 스타일보다 그 뒤에 나오는 스타일이 우선 적용되는 것입니다.

p {
  color: red;
  color: blue; // blue가 적용됨
}

 

그리고 브라우저가 지원하는기능인지 아닌지, 모르는 경우 :

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem); // clamp를 브라우저가 지원하지 않는 경우
}

 

나중에 나온 `font-size: clamp()`를 먼저 적용해보고 브라우저가 이것을 처리하지 못하면 다시 `font-size: 1.5rem`를 적용시키도록 활용할 수 있습니다.

 

---

 

여기까지 CSS의 Cascading에 대해 알아봤습니다.

 

Cascading은 위에서 아래로 흐르는, 프로그래밍에서의 `종속`을 뜻하기도 합니다.

 

아주 간단하게 생각해보면, 캐스케이딩은 CSS 선택자의 우선순위를 정하는 거라고 볼 수도 있겠네요.

 

어떤 선택자가 높은 점수를 가지고 먼저 적용되는지, 어떤(특정) 경우에 먼저 적용되거나 나중에 적용되는지,

그리고 항상 높은 점수를 받는 경우(인라인 스타일), 무조건 가장 먼저 적용되는 경우(!important)를 정하는 공식이 있다는 것도 알 수 있었습니다.

 

HTML과 CSS를 다루다 보면, 적용하고싶은 코드가 무시되거나 적용되지 않는 경우가 있습니다.

저는 스타일이 적용되지 않아 헤맸던 경험도 있고, 그러다 인라인으로 작성한 스타일이 왠지 잘 적용되는 느낌을 받은 적도 있었습니다. 이유는 캐스캐이딩 우선순위 알고리즘 때문이었네요.

 

CSS 캐스케이딩의 우선순위로 인해 헤맬 수 있지만, 반대로 어려운 상황에서도 스타일을 끌어내서 활용하는것도 가능할 것 같습니다.

 

그리고 만약 CSS가 적용이 안된다거나, CSS 설계를 처음부터 해야할 때 캐스케이딩을 떠올리면 조금 더 수월하게 문제를 해결할 수 있겠네요 !