CSS 우선순위가 적용되는 진짜 순서 3단계

📝 위에서 아래로 읽히지 않는 이유

CSS 우선순위를 처음 배울 때 가장 많이 듣는 설명은 “위에서 아래로 적용된다”입니다.
파일 상단에 작성한 스타일보다 하단에 작성한 스타일이 덮어쓴다는 설명이죠.

이 설명은 틀리지는 않지만 중요한 조건이 생략된 반쪽짜리 설명입니다.

CSS가 어렵게 느껴지는 이유는 문법 때문이 아니라
“왜 이 스타일이 적용되고, 왜 저건 무시되는지”를 설명받지 못했기 때문입니다.

이 글에서는 CSS가 실제로 어떤 순서와 기준으로 적용되는지,
그리고 그 과정에서 오해가 생기는 지점을 구조적으로 정리해 보겠습니다.

📝 1. CSS는 ‘선언 순서’보다 먼저 계산됩니다

브라우저는 CSS를 단순히 위에서 아래로 읽지 않습니다.
먼저 모든 스타일을 읽고, 각 스타일이 어느 요소에 얼마나 강하게 적용되는지 계산합니다.
이 계산이 끝난 뒤에야 실제 화면에 어떤 값이 적용될지 결정됩니다.

예를 들어 다음과 같은 코드가 있다고 가정해 보겠습니다.

p {
  color: blue;
}

.text {
  color: red;
}

<p class="text">Hello</p>

p {
  color: blue;
}

.text {
  color: red;
}

<p class="text">Hello</p>

이 경우, p가 위에 선언되어 있고 .text는 아래에 선언되어 있지만
실제로 색상이 빨간색으로 보이는 이유는 선언 위치 때문이 아닙니다.

브라우저는 이미 이 단계에서
“클래스 선택자가 태그 선택자보다 우선순위가 높다”는 계산을 끝낸 상태입니다.

즉, CSS에는 다음과 같은 흐름이 존재합니다.

📝 2. CSS 우선순위는 감각이 아니라 점수입니다

CSS 우선순위는 느낌이나 경험치로 정해지지 않습니다.
숫자처럼 계산되는 규칙이 존재합니다.

아래 예제를 보면 왜 “나중에 썼는데 안 먹는지”가 바로 드러납니다.

#title {
  color: green;
}

.box {
  color: orange;
}

<h1 id="title" class="box">CSS</h1>

#title {
  color: green;
}

.box {
  color: orange;
}

<h1 id="title" class="box">CSS</h1>

이 경우 결과는 초록색입니다.
.box가 아래에 선언되었음에도 불구하고 적용되지 않는 이유는 단 하나입니다.

👉 아이디 선택자가 클래스 선택자보다 우선순위 점수가 훨씬 높기 때문입니다.

이 계산이 끝난 뒤에는
선언 순서가 아무 의미를 가지지 못합니다.

📝3. !important가 만능 해결책이 아닌 이유

스타일이 적용되지 않을 때 가장 흔히 등장하는 코드가 있습니다.

.box {
  color: red !important;
}

.box {
  color: red !important;
}

이렇게 하면 대부분 원하는 결과가 나옵니다.
하지만 이 순간부터 CSS는 점점 통제하기 어려워집니다.

왜냐하면 !important는
우선순위 계산 과정을 강제로 무시하기 때문입니다.

#title {
  color: green;
}

.box {
  color: red !important;
}

#title {
  color: green;
}

.box {
  color: red !important;
}

위 코드에서는 이제 클래스가 아이디를 이겨버립니다.
문제는 이 선택이 구조를 이해해서 한 결정이 아니라는 점입니다.

이후에 또 다른 스타일이 필요해지면
더 강한 !important를 찾게 되고,
결국 전체 스타일 구조가 엉키게 됩니다.

📝 4. 선언 순서는 언제 의미를 가질까

그렇다면 선언 순서는 언제 의미가 있을까요?
정답은 우선순위 점수가 완전히 같을 때입니다.

.text {
  color: blue;
}

.text {
  color: red;
}

<p class="text">Hello</p>

.text {
  color: blue;
}

.text {
  color: red;
}

<p class="text">Hello</p>

이 경우에만
아래에 작성한 코드가 위의 코드를 덮어씁니다.

선택자도 같고, 조건도 같고, 점수도 같기 때문에
마지막 선언이 최종 결과가 됩니다.

이 조건을 빼고
“CSS는 아래에서 위를 덮는다”라고 설명하면
CSS는 예측 불가능한 언어처럼 느껴질 수밖에 없습니다.

📝 5. CSS가 어렵게 느껴지는 진짜 이유

CSS가 어렵게 느껴지는 이유는 규칙이 많아서가 아닙니다.
규칙이 언제 작동하는지 설명되지 않았기 때문입니다.

JavaScript에서 호이스팅을 실행 구조로 이해하면 코드가 예측 가능해지듯,
CSS도 계산 구조를 이해하면 결과가 논리적으로 보이기 시작합니다.

이 순간부터 CSS는 감각의 영역이 아니라,
의사결정이 가능한 언어로 바뀝니다.

🔥 인기 글

CSS 우선순위가 적용되는 진짜 순서 3단계

MORE

호이스팅이란 무엇일까? 3가지 핵심으로 이해하기

MORE

JS로 CSS를 직접 제어하면 결국 남는 건 유지보수 지옥이다

MORE