공통 CSS가 중복되는 이유와 해결법(로드순서/우선순위 실전)

공통 CSS가 중복되는 이유와 해결법

(로드 순서 · 우선순위 실전 정리)

고도화 프로젝트에서 가장 많이 나오는 말:

“왜 여기만 스타일이 다르게 나오지?”

 

코드는 똑같은데
페이지마다 다르게 보이는 경우.

 

대부분 원인은
공통 CSS 중복 + 로드 순서 + 우선순위 충돌이다.

 

 

공통 CSS가 중복되는 이유와 해결법

 

 

1. 공통 CSS가 중복되는 이유

1) 프로젝트가 이어받기식으로 진행됨

• A업체 → B업체 → C업체
• 공통 파일을 건드리기 무서워서 새로 추가
• 결국 비슷한 버튼 스타일이 3군데 존재

2) 페이지 전용 CSS가 공통을 덮어씀

/* common.css */
.btn {
  padding: 10px 20px;
}

/* page.css */
.btn {
  padding: 12px 24px;
}

 

→ 어디가 이기느냐는 “로드 순서”에 달림.

3) !important 남발

.btn {
  padding: 14px !important;
}

 

이 순간부터
우선순위 전쟁 시작.

---

2. CSS 우선순위 기본 원리 (실무 버전)

우선순위는 크게 3가지가 결정한다.

1. !important
2. 선택자 구체성 (specificity)
3. 로드 순서

로드 순서가 가장 많이 터진다.

HTML

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="page.css">

 

→ page.css가 항상 마지막 승자.

---

3. 고도화 프로젝트에서 가장 위험한 구조

HTML

<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="common_v2.css">

 

이러면:

• 기존 공통
• 페이지 전용
• 새 공통

이 섞이면서
“예측 불가능 상태”가 된다.

---

4. 실전 해결 전략

1) 로드 순서를 먼저 고정하라

권장 구조:

1. reset / base
2. 공통 layout
3. 공통 components
4. 페이지 전용
5. override (최소화)

로드 순서 통일이 1순위다.

 

2) 공통은 “절대적인 기준”으로 만들 것

공통 CSS는

• 버튼
• 테이블
• 폼
• 타이포그래피

기본값만 정의한다.

페이지에서 padding을 바꾸지 말고
modifier 클래스를 만든다.

CSS

.btn--large {
  padding: 14px 28px;
}

이게 훨씬 안전하다.

 

3) 선택자 깊이를 줄여라

위험한 코드:

CSS

#container .content .box .btn

 

이러면 나중에 override 불가능.

가능하면 2~3 depth 이하 유지.

 

4) !important 제거 루틴

1. DevTools에서 실제 적용 CSS 확인
2. 어떤 파일이 이기는지 확인
3. 로드 순서 정리
4. !important 제거

!important는 해결책이 아니라
문제 지연 장치다.

---

5. 실무에서 제일 많이 하는 실수

고도화 중간에 이런 말이 나온다.

“일단 이 페이지만 급해서 여기서 덮자.”

 

그 순간부터
공통은 무너진다.

---

6. ChatGPT 활용 포인트

우선순위 분석 프롬프트

아래 HTML과 CSS에서
.btn에 실제 적용되는 스타일을 분석해줘.
우선순위 기준으로 설명해줘.

 

중복 제거 요청

아래 CSS 중 중복되는 공통 스타일을 정리하고
공통/페이지 전용으로 분리해줘.

 

---

정리

공통 CSS가 중복되는 이유는

• 프로젝트 누적
• 로드 순서 무시
• 선택자 과도한 중첩
• !important 남발

해결법은 단 하나.

로드 순서를 통일하고
공통을 “기준”으로 만든다.