1. Cascade, 캐스케이트?
CSS의 약자는 Cascading Style Sheet, 캐스케이팅 스타일 시트라는 말이다.
여기서 캐스케이팅은 무슨 의미를 나타낼까? 옥스포드에서는 아래와 같이 캐스케이트를 정의하고 있다.
1. 대량의 물이 빠르게 아래로 떨어지는 것
2. 순서대로 배열되는 것
CSS의 약자가 Cascading Style Sheet인만큼 CSS는 이 캐스케이팅의 원리가 중요하게 적용된다는 뜻이다.
그럼 이 캐스케이트의 원리가 무엇인가?
Cascade는 스타일 규칙이 어떻게 적용되고 우선순위가 결정되는지에 관한 규칙을 나타낸다.
CSS를 작성하다보면 같은 요소에 여러개의 스타일이 중복적으로 적용될 수 있다.
예를 들어서 아래와 같은 상황이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap{
width: 100%;
}
.top{
width: 100%;
height: 30px;
background-color: chartreuse;
}
.bottom{
width: 100%;
height: 100px;
display: flex;
}
.right{
width: 50%;
height: 100%;
}
.left{
width: 50%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div class="top">Lorem ipsum dolor sit amet.</div>
<div class="bottom">
<div class="left" style="background-color: aqua;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In possimus saepe sunt iste nisi tempore tenetur delectus natus magnam similique. Hic fugiat dolore, dolores qui earum eum sit tenetur quisquam.</div>
<div class="right" style="background-color: bisque;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, quos?</div>
</div>
</div>
</body>
</html>
.left와 .right에는 직접적으로 background 스타일이 적용되어 있다. 그런데 이 left값은 내부스타일로 blue라는 background 스타일이 중복되어 적용되어 있는데 실제로 웹에서 적용되어 나타나는 화면은 아래와 같다.
그런데 여기서 !important 값을 아래와 같이 넣는다면 어떻게 될까?
.left{
width: 50%;
height: 100%;
background-color: blue !important;
}
이런식으로 나타나는 이유는 Cascade의 규칙이 적용되고 있기 때문이다.
그리고 Cascade, 스타일 우선순위는
① Specificity(명시도)
② Importance(중요도)
③ Source Order(소스 순서)
에 따라 순위가 결정된다.
2. 우선순위, Specificity (명시도)
- 스타일이 얼마나 구체적인지를 나타낸다.
- inline 스타일 > ID 선택자 > class 선택자 > 일반 선택자 순으로 정해진다.
- Specificity가 높은 스타일 규칙이 다른 규칙보다 우선된다.
위에서 inline스타일로 직접적으로 background가 left div에게 아쿠아 색상이 주어졌고 class선택자로 blue라는 값이 적용되었기 때문에 CSS의 우선순위의 specificity에 의해서 높은 스타일 규칙인 inline 스타일이 웹에 나타나게 되는 것이다.
참고로 id선택자가 class선택자보다 더 높은 스타일규칙을 가지는 이유는 class는 여러번 사용될 수 있기에 id보다 넓은 범위를 가지고 id는 반대로 class보다 좁은 범위의 스타일을 규정하기 때문이다.
3. 우선순위, Importance (중요도)
- !important 키워드를 사용하여 선언된 스타일은 다른 모든 스타일 규칙보다 우선된다.
- 일반적으로 이 !important는 최소한으로 사용하는 것이 좋은데 이것을 남용하면 코드의 유지보수가 어려워질 수 있기 때문이다.
좀더 자세하게 말하자면 !important 남용시 스타일 규칙간에 충돌이 발생할 수 있고 원치 않는 결과가 발생할 수 있다. 또한, !important가 선언된 스타일은 다른 모든 스타일을 오버라이드(Override)하기에 코드의 복잡성을 증가시키고 다른 개발자들이 코드를 이해하는데 어려움을 줄 수 있다.
※ 오버라이드(Override) : 한 요소에 적용된 스타일이 다른 스타일에 의해 덮어씌워지는 것을 의미한다. 즉, 이전에 선언된 스타일이 이후에 선언된 스타일에 의해 대체되는 것을 말한다.
4. 우선순위, Source Order (소스 순서)
- 동일한 Specificity와 Importance를 갖는 스타일 규칙은 소스코드에서 마지막으로 선언된 것이 우선된다.
- 즉, 동일한 명시도와 중요도를 갖는 규칙은 마지막에 선언된 규칙이 이전에 선언된 규칙을 덮어쓴다.
- 부모요소에 적용되어 있는 스타일요소가 자식요소에게도 적용되는 것(스타일 상속) 또한 Source Order이다. 코드를 보다 간결하고 유지보수가 쉬운 방향으로 작성할 수 있다. 일반적으로 텍스트 관련 속성(폰트, 색상, 텍스트 스타일)은 상속되며 배경색, 너비, 높이 등의 박스 모델 속성은 상속되지 않는다.
☘️ 정리하자면 Cascade는 스타일이 우선적으로 적용되는 스타일 규칙을 의미한다.
!important > inline > id선택자 > class선택자 > Html 태그 > 스타일상속(DOM구조의 상위상속)
참고자료
https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://velog.io/@bami/CSS-Cascading
https://blinders.tistory.com/87
