CSS 캐스캐이딩이란?
여러 스타일 규칙이 하나의 요소에 적용될 때
규칙들이 어떤 순서와 방식으로 결합되어 최종적인 스타일이 정해지는 메커니즘
즉, 스타일 우선 순위이다.
캐스캐이딩의 중요성
스타일 충돌 해결
스타일 적용 규칙에 따라 충돌하는 스타일을 정리한다.
코드 재사용성 향상
전역 스타일과 로컬 스타일을 구성하여 중복 스타일은 전역으로 한번만 작성하여 같이 사용하여 재사용성을 높인다.
유지 관리 용이성
중복 스타일을 재사용했으면 이를 수정할 때도 하나만 수정하면 되므로 유지 관리가 용이해진다.
사용자 정의 스타일 우선 ⇒ 웹 접근성 향상
사용자가 정의한 스타일이 개발자가 정의한 스타일보다 규칙 상 우선 된다.
덕분에 사용자의 웹 접근성이 향상된다.
예를 들어, 시각적 장애가 있는 사용자가 스스로 확장 프로그램 등을 사용해서 웹 콘텐츠에 자신에게 적합한 스타일을 적용해서 사용할 수 있다.
CSS 캐스캐이딩의 원리
우선 순위 규칙: 중요도, 명시도, 소스 순서를 모두 고려하여 판단한다.
중요도 (번호 순서대로 높은 위계를 갖는다.)
- 중요 스타일(!important)이 적용된 작성자 스타일
- 중요 스타일(!important)이 적용된 사용자 스타일
- 일반 작성자 스타일 (개발자가 만든 스타일)
- 사용자 에이전트 스타일 (브라우저 기본값)
명시도
명시도는 선택자의 구체성을 측정한다.
명시도는 높고 낮음으로 표현한다.
(적용 범위로 이해해보자)
적용 범위로 생각해보면 구체적이라는 것은 적용 범위가 적다는 것이다. 하나의 요소에만 적용되는 적용 범위가 적은 스타일은 구체성이 높은 것이다.
명시도가 높은 순서 :
인라인 스타일 > id 선택자 > class 선택자 > tag 선택자
-
인라인 스타일은 style 속성에 작성한 스타일을 말한다.
<p style="color: blue;"> -
id는 고유한 하나의 요소에만 적용되기 때문에 적용 범위가 가장 적고 구체성이 가장 높은 것이다.
-
class는 여러 요소가 같은 class 이름을 가질 수 있으므로 id보다는 범위가 넓고 구체성이 낮다.
-
tag는 해당하는 모든 태그에 적용되므로 적용 범위가 넓고 구체성이 낮다.
명시도 계산
- 인라인, id, class, tag 순서로 비교하고 상위 레벨에서 동점일 때만 하위 레벨을 비교한다.
- 상위 레벨에서 우선 순위가 정해지면 하위에 얼마나 있어도 이미 우선순위는 결정난 것이다.
소스 순서
중요도와 명시도가 같을 때
나중에 작성된 코드의 우선 순위가 높다.
캐스캐이딩을 이해하면 스타일을 작성할 때 우선 순위를 고려하여 작성할 수 있고 충돌이 발생했을 때 문제 지점을 파악하고 해결할 수 있다.
