Cascade 란?
Cascade는 CSS (Cascading Style Sheets)의 핵심('C')이며, 페이지 요소에 적용되는 속성을 결정하는 알고리즘이다. 이 결정은 상속, 특이성, 중요도 및 규칙 순서를 기반으로 한다.
Cascade는 동일한 property 및 element에 대해 다중 CSS 규칙이있는 경우, 충돌을 방지하는 역할을 한다.
상속
CSS 상속은 property별로 동작한다.
CSS selector에서 property를 설정하면, 해당 selector의 모든 자식 상속여부가 property에 의해 결정된다.
글꼴 적용 시, 페이지의 각 element들에 스타일을 일일히 적용 할 필요가 없다. <body> 태그에만 적용하면 모든 자식들이 상속한다.
반면 background과 같은 속성은 상속되지 않는다(관련 문서).
상속은 반복을 줄임으로써 CSS 작성을 훨씬 간결하게 해준다.
Property 강제 상속
property를 상속 할 수 없는 경우 자식에게 강제로 상속 할 수 있다.
자식 selector에서 상속 할 property 값을 설정한다.
body {
background-color: red;
}
p {
background-color: inherit;
}Property 상속 방지
revert 를 사용하면 property가 부모로부터 상속되지 않는다. 이 경우 값은 브라우저에서 지정한 원래 기본값으로 되돌린다.
Initial & Unset
Initial 및 Unset도 사용 가능하다.
- initial: CSS 속성을 기본값 (브라우저 기본값)으로 설정
- unset: property가 부모로부터 상속 된 경우, 상속된 값으로 재설정되고 그렇지 않은 경우 초기 값으로 재설정
특수성
element에 여러 규칙이 적용될 경우, CSS의 특수성이 작용한다.
<p class="mainName">
Neo
</p>.mainName {
color: green;
}
p {
color: blue;
}위 예제는 특수성이 적용되어, Neo는 파란색이 아닌 초록색이 된다.
CSS 스타일은 규칙이 더 구체적일수록 더 높은 점수를 얻고, element의 스타일에 적용될 가능성이 높아진다. 두 개 이상의 규칙이 동일한 특수성을 갖는 경우, 맨 마지막에 나타나는 규칙을 적용한다.
특수성 계산 규칙
각 0에서 시작하는 4 개의 슬롯을 예로 들어보자.
0 0 0 0
(슬롯4) (슬롯3) (슬롯2) (슬롯1)
중요도는 오른쪽으로 갈수록 낮아진다.
1 0 0 0 > 0 1 0 0
슬롯 1
가장 중요도가 낮은 슬롯이다.
이 값은 type(태그 이름) selector가 있을 때 변경된다. 규칙에 둘 이상의 type selector가 있는 경우 슬롯에 저장된 값을 증가시킨다.
p {} /* 0 0 0 1 */
span {} /* 0 0 0 1 */
p span {} /* 0 0 0 2 */
p > span {} /* 0 0 0 2 */
div p > span {} /* 0 0 0 3 */슬롯 2
두 번째 슬롯은 다음에 의해 결정된다.
- class selector
- pseudo class selector
- attribute selector
규칙에 위 selector 중 하나가 포함될 때마다, 슬롯 2 값이 증가합니다.
.amount {} /* 0 0 1 0 */
.user .amount {} /* 0 0 2 0 */
[type="button"] {} /* 0 0 1 0 */
:hover {} /* 0 0 1 0 */슬롯 2 selector와 슬롯 1 selector는 결합 가능하다.
p .amount {} /* 0 0 1 1 */
input[type="button"] {} /* 0 0 1 1 */
.images img:hover {} /* 0 0 2 1 */슬롯 3
슬롯 3은 ID 전용이다.
모든 HTML element에는 id 속성이 할당 가능하다. 그리고 스타일 시트에서 id를 사용하여 element를 구체적으로 타겟팅 할 수 있다.
#amount {} /* 0 1 0 0 */
.user #amount {} /* 0 1 1 0 */
#amount span {} /* 0 1 0 1 */슬롯 4
슬롯 4는 내부 스타일이다. 모든 내부 스타일은 외부 CSS 파일 또는 페이지 header의 스타일 태그 내에 정의된 규칙보다 우선시 된다.
<p style="color: grey">ohmygirl</p> /* 1 0 0 0 */Importance
규칙이 !important로 끝나는 경우, 모든 특수성이 무효가 된다.
p {
color: orange !important;
}CSS 규칙에 !important를 추가하면, 다른 규칙들보다 더 중요해진다.
하지만 되도록 !important를 사용하지 않는 것이 좋다. 최대한 특수성 규칙을 준수하여 CSS를 작성하는것을 추천한다.
