# CSS 코드는 왜 중복될까요?
장기 웹 프로젝트를 유지하거나 레거시 코드를 다룰 때, 여러 개발자가 겹치는 CSS 규칙을 작성하는 일은 매우 흔합니다. 기존 디자인을 건드릴까 봐 두려운 나머지, 원래 코드를 수정하거나 리팩터링하는 대신 문서 끝에 새 규칙을 덧붙이는 방식을 선택하곤 하죠.그 결과는 수십 개의 셀렉터가 반복 선언된 비효율적인 파일이며, 가독성을 해치고 웹 페이지의 다운로드 무게를 크게 늘립니다.# 웹 성능(Web Vitals)에 미치는 숨겨진 영향
스타일시트 파일은 브라우저의 자연스러운 렌더링을 막습니다(Render-Blocking 리소스). 브라우저가 완전한 CSSOM을 다운로드하고 구성하기 전까지는 화면이 텅 빈 상태로 남아 있습니다. 불필요한 스타일을 제거하는 것은 단순히 코드를 깔끔하게 만드는 일이 아닙니다. First Contentful Paint(FCP) 같은 핵심 지표를 즉각적이고 수치적으로 개선할 수 있습니다.
# 중복 규칙을 통합하는 방법
이 도구는 지능형 어셈블러처럼 작동합니다. 전통적인 압축 도구처럼 공백만 줄이는 게 아니라, 텍스트를 재귀적으로 스캔하여 동일한 셀렉터 패턴을 찾아냅니다.-
.box { color: red; }규칙이 있고 100줄 아래에.box { padding: 10px; color: blue; }가 있다고 상상해보세요. 이 도구는 두 블록을 같은.box셀렉터 아래로 통합하고 padding을 합칩니다. - CSS 캐스케이드 보존: 직접적인 충돌이 있을 경우, 알고리즘은 마지막에 선언된 속성을 엄격히 보존합니다. 덕분에 정리 작업 후에도 원래 레이아웃이 무너지지 않습니다.