CSS 적용 규칙(Cascade)에 대해서

Cascade

CSS는 알다시피 Cascading Stylesheets의 약자입니다. 여기서 Cascading이란 폭포처럼 아래로 흐르는 것을 의미합니다. 즉, CSS 스타일은 하위의 요소에 스타일이 상속되거나, 이를 덮어씌울 수 있다는 것을 의미합니다. 그렇다면 어느 경우에 덮어씌워지는지, 혹은 어떤 스타일이 우선순위를 가지는지는 어떻게 결정할까요? 이러한 문제를 해결하는 알고리즘이 바로 Cascade입니다.

 

Cascade 알고리즘은 4가지 단계로 나눌 수 있습니다.

1. 위치 및 표시 순서
2. 특정성(Specificity)
3. 출처(Origin)
4. 중요도(Importance)

 

위치 및 표시 순서

우선 CSS를 HTML 페이지에 적용하는 방법은 3가지가 있다는 사실을 짚고 넘어가도록 하겠습니다. 첫 번째로는 <link> tag로 외부의 css stylesheet을 가져오는 방법이 있습니다. 두 번째로는 <style> 태그를 사용하는 방법이 있습니다. 마지막으로 각 요소에 인라인 style 속성에 스타일을 주는 방법이 있습니다. 

 

이중 style 속성을 이용하는 방법을 제외한 첫 번째와 두 번째 방법은 동일한 특정성 점수의 선택자를 가지는 경우, HTML 페이지 더 하단에 정의된 스타일을 적용하게 됩니다. 쉽게 기존의 룰을 덮어씌운다고 생각하면 될 것같습니다.

 

세 번째 방법인 인라인 style 속성의 경우 특정성의 점수(추후에 다른 글에서 다루겠습니다)가 첫 번째와 두번째의 경우보다 높기 때문에 일반적으로 !important가 정의되어 있지 않은 경우 위치에 관계없이 더 높은 우선순위를 가집니다.

 

또한 하나의 CSS 규칙안에서의 순서도 비슷하게 작동합니다. 다음의 예에서 버튼은 보라색이 되는데, 이는 더 하단에 정의되어 있기 때문입니다.

.my-element {
  background: green;
  background: purple;
}

이처럼 동일한 속성을 이렇게 두번 연속 지정하는 것은 브라우저가 지원하지 않는 기능에 대한 fallback을 제공하기 위해 사용할 수 있습니다.

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
}

브라우저에서 clamp를 지원하는 경우 아래의 font-size가 위의 스타일을 덮어씌우지만, clamp를 지원하지 않는 경우 해당 룰을 무시하기 때문에 위의 스타일이 적용됩니다.

 

특정성 (Specificity)

특정성이란 css 선택자가 얼마나 특정 요소를 가리키는지를 의미합니다. 즉, 더 구체적인 css 선택자로 스타일을 정의하는지가 더 높은 우선순위를 가집니다. 이러한 방법으로 동일한 요소에 대한 스타일이 하단에 정의되어 있더라도 상단에 정의된 규칙이 적용되도록 할 수 있습니다. 특정성은 점수로 계산되어, 점수가 높은 규칙이 적용됩니다. 특정성 점수에 대한 부분은 다음 글에서 다루도록 하겠습니다.

 

출처 (Origin)

페이지에 적용되는 CSS는 내가 작성한 css말고도 여러가지가 존재합니다. Cascade는 css의 출처를 고려하여 우선순위를 매깁니다. 우선순위가 낮은 순서부터 높은 순서로 나열하자면 다음과 같습니다.

 

1. User Agent 기본 스타일: 브라우저에서 기본적으로 정의된 스타일
2. 로컬 사용자 스타일: 운영체제, 브라우저 확장프로그램등에서 정의된 스타일
3. 내가 작성한 CSS
4. 내가 작성한 !important
5. 로컬 사용자 !important
6. 사용자 에이전트 !important

중요성 (!important)

중요성의 순서는 덜 중요한 것부터 가장 중요한 것 순으로 다음과 같습니다.

1. 일반적인 규칙
2. animation 규칙
3. !imporant 규칙
4. transition 규칙

animation, transition 규칙의 경우 활성화될시 시각저으로 보여져야하기 때문에 일반 규칙보다 중요합니다.

 

 

마무리

CSS 적용 우선순위에 대해서 헷갈려서 알아본 내용을 글로 작성해봤습니다. 해당 내용은 https://web.dev/learn/css/the-cascade/ 에 작성된 내용을 기반으로 작성했습니다. 사실 조금 헷갈리는 부분이 있긴 한데 이는 다음 글에서 다룰 특정성 점수에 대해서 알게되면 더 이해가 쉬울 것같습니다.