DDODDO LAB

공통 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 남발...

(고도화 실전: 레거시 정리 루틴)고도화 프로젝트를 들어가면 흔히 이런 상태다.어떤 사이트는 SCSS어떤 사이트는 CSS공통은 여기저기서 불러오고파일명/경로 규칙도 제각각이 상태에서 “그냥 수정”부터 하면 중반부터 충돌과 중복이 폭발한다.정리는 코딩 전에 해야 한다. 1. 먼저 “목표”를 정하자 (중요)혼재 프로젝트 정리는 2가지 선택지 중 하나다.A. 완전 통합(추천: 신규/대규모 개편)모든 스타일을 SCSS로 통일구조 재설계 가능초기 비용 ↑ / 유지보수 효율 ↑B. 병행 운영(추천: 고도화/기간 촉박)기존 CSS 유지신규(v2/v3/v4 등)만 SCSS로 구성리스크 ↓ / 속도 ↑공공기관 고도화는 대부분 B가 현실적이야.2. “현재 상태”를 30분 안에 지도 그리기체크어디가 SCSS인지 / 어디..