Cascading
Cascading은 단어 뜻 그대로 CSS가 HTML 요소에 적용될 때 어떤 규칙이 우선순위를 가지는지를 결정하는 과정이다.
크게 스타일시트의 출처, 중요도, 명시도 세 가지 원칙에 따라 작동한다.
스타일시트의 출처
- 브라우저 기본 스타일: 모든 브라우저는 기본적으로 제공하는 기본 스타일을 가지고 있다.
- 사용자 스타일: 사용자가 직접 설정한 스타일
- 제작자 스타일: 웹페이지를 만든 사람이 작성한 스타일
우선순위는 아래와 같다.
- 제작자 스타일 > 사용자 스타일 > 브라우저 기본 스타일
중요도
h1 {
font-size: 16px !important;
}
h1 {
font-size: 20px;
}- h1 태그가 나중에 작성되어서 글자 크기가 20px일 것 같지만, !important를 선언해주면 최고로 높은 우선순위를 가지게 된다.
CSS에서 규칙을 강제로 우선순위로 적용하기 위해 사용된다. 하지만 최후의 수단으로만 사용해야 한다. 이유는 아래와 같다.
- 유지보수의 어려움
!important를 남용하면 스타일 규칙을 이해하고 유지보수하기 어렵게 된다. 여러 규칙이 적용될 때 !important가 자주 사용되면, 어느 규칙이 우선되는지를 추적하기가 힘들어진다.
- 우선순위 체계 무시
CSS는 우선순위 체계를 통해 스타일을 적용한다. !important는 이 체계를 무시하고 강제로 적용하여 예상치 못한 스타일 충돌이 발생할 수 있다. 특히 큰 규모의 프로젝트나 여러 명이 협업하는 프로젝트에서 문제를 발생시킬 수 있다.
- 코드의 일관성 저하
!important를 남발하면 코드의 일관성을 해칠 수 있다. 모든 스타일 규칙이 명확한 우선순위 체계에 따라 적용되는 것이 아니라, 무작위로 우선순위를 지정받게 되며 코드의 일관성과 가독성이 떨어진다.
- 디버깅 어려움
디버깅에 어려움이 생긴다. 예를 들어, 예상치 못한 스타일 충돌이 생겼을 경우, 해당 요소에 적용된 모든 스타일 규칙을 하나씩 확인해야 하는 번거로움이 있다.
- 재사용성 문제
모듈화되고 재사용 가능한 CSS를 작성하는 것이 중요하다. !Important는 특정 상황에서만 유용하기 때문에, 이를 사용하면 스타일을 재사용하거나 다른 프로젝트에 적용하는 데 어려움을 겪을 수 있다.
명시도
명시도는 CSS 규칙이 다른 규칙보다 우선되는지를 결정하는 수치이다. 선택자의 유형에 따라 점수를 매겨 계산된다.
- 인라인 스타일: 1000점
<div style="color: blue"></div>
- id 선택자: 100점
#title
- class, 속성, 가상 class: 10점
.container
<input type="text" />
:hover
- 요소, 가상 요소: 1점
div
:before
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cascading Example</title>
<style>
/* 점수: 10 */
.example {
color: blue;
}
/* 점수: 1 */
p {
color: red;
}
/* 점수: 100 */
#unique {
color: green;
}
</style>
</head>
<body>
<p class="example">This is a paragraph.</p>
<p id="unique">This is another paragraph.</p>
</body>
</html>
여기서 첫 번째 p 요소는 .example 클래스와 p 요소 셀렉터가 적용된다. class의 명시도가 더 높기 때문에 color: blue가 적용된다. 두 번째 p 요소는 #unique ID 셀렉터가 적용되어 color: green이 된다.
'CS' 카테고리의 다른 글
| Git Flow 브랜치 전략 (2) | 2024.06.08 |
|---|---|
| Git에서 Branch Merge 방법들과 각 방법의 특징 (0) | 2024.06.08 |