CSS의 Cascade는 CSS가 스타일을 적용할 때 복수의 선택자가 동일한 요소를 가리키는 경우, 스타일을 적용할 우선순위를 결정하는 알고리즘이다.
우선순위를 결정하는 요소들은 다음과 같다.
1.!important
important가 적용된 속성이 최우선으로 적용된다. 하지만 important는 자주 사용하지 않는 것이 좋다.
!important를 적용한 요소에 다른 곳에서 중복으로 !important가 적용돼 있을 경우 또 다시 우선도를 계산해서 적용되기 때문에 개발자가 의도한 결과가 나오지 않을 수 있다.
그렇기 때문에 불가피하게 important를 사용해야할 땐 이유를 주석으로 남기고 후에 !important를 사용하지 않도록 리팩터링하는 것이 좋다.
2.출처(사용자 에이전트 시트,사용자 스타일 시트,작성자 스타일 시트)
스타일의 출처에 따라서도 우선도가 달라진다. 사용자 에이전트 스타일 시트,사용자 스타일 시트,작성자 스타일 시트로 총 세개의 출처가 있는데 먼저 사용자 에이전트 스타일 시트는 브라우저에 기본으로 적용되는 스타일을 말한다. 그리고 사용자 스타일 시트는 사용자가 직접 브라우저에 커스텀으로 지정하여 사용하는 스타일 시트를 말한다. 그리고 작성자 스타일 시트는 개발자가 작성한 스타일 시트를 말한다. 이들의 적용 순서는 다음과 같다.
사용자 에이전트 스타일 시트 -> 작성자 스타일 시트 -> 사용자 스타일 시트
최종적으로 사용자 스타일 시트가 적용되기 때문에 중복되는 속성이 있을 경우 !important가 붙은 속성이 아니라면 사용자 스타일 시트의 속성이 최종적으로 적용된다.
3.명시도
명시도는 요소를 가리키는 특정성의 정도를 말한다. 더 구체적으로 특정하는 선택자를 우선시 한다.
1.인라인 스타일(1000점)
html 태그에 직접 적용된 스타일이 최우선으로 적용된다. 태그에 직접 적용하는 스타일이기 때문에 특정성이 가장 높다.
<div style="background-color:red"></div>2.ID선택자(100점)
하나의 ID는 하나의 요소에만 적용하는 것이 원칙이기 때문에 #test-id와 같은 ID선택자가 그 다음으로 특정하는 선택자이다. 만약 두개 이상의 요소에 동일한 ID가 적용될 경우 HTML 코드 순서 상 먼저 작성된 태그에 ID가 적용된다.
3.클래스 선택자,속성 선택자,가상 클래스 선택자(10점)
그 다음으로는 .test-id와 같이 특정 클래스를 가진 요소를 선택하는 클래스 선택자와,[type="text"]와 같이 특정 속성을 가진 요소를 선택하는 속성 선택자, :hover와 같이 특정 상태나 조건을 기반으로 선택하는 가상 클래스 선택자가 있다.
4.요소 선택자,가상 요소 선택자(1점)
div,p,span등과 같이 요소를 선택하는요소 선택자와 요소의 ::first-line과 같이 요소의 특정 부분을 선택하는 가상 요소 선택자가 있다.
4.선언순서
위의 조건들이 모두 일치하는 속성들이 있을 경우 선언된 순서에 따라서 적용여부가 결정된다.
Cascade라는 단어의 뜻처럼 위에서 아래로 적용되기 때문에 가장 나중에 작성된 속성이 최종으로 적용된다.
html 코드 내에서 <link/>태그로 불러와서 적용한 스타일 시트와 <style></style>태그로 적용한 스타일 역시 가장 나중에 작성된 스타일이 적용된다.
5.케스케이드 레이어
Cascade Layer가 그 다음으로 중요도를 차지한다. layer가 더 나중에 선언되었더라도 layer 바깥에 존재하는 속성들이 더 높은 중요도를 갖게 된다.
6.상속
아무런 속성도 적용되지 않은 요소에 대해선 상위 요소에서 상속받은 스타일이 적용된다.
