CSS 중복 선택자 및 규칙 정리기
스타일시트 내에서 중복해서 쓰인 동일한 CSS 셀렉터 선언문들을 하나로 병합 및 정제
오래 개발되어 스파게티 코드가 된 CSS 파일이나 여러 스타일 템일릿을 합치는 과정에서 생겨난 동일 선택자(Selector)의 중복 지정 문제들을 찾아서 선언부 속성들을 하나로 합쳐서 일괄 정리해 주는 최적화 도구입니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 정리하고 싶은 CSS 소스코드를 전체 입력란에 붙여넣습니다.
- 중복 CSS 정리하기 버튼을 클릭하여 연산을 수행합니다.
- 실제 병합 및 절약된 셀렉터 선언 규칙 통계를 확인하고, 정제되어 깔끔해진 최종 CSS 코드를 다운로드하거나 복사합니다.
자주 묻는 질문
- 속성이 충돌할 경우(동일 키에 다른 값)는 어떻게 합쳐지나요?
- CSS의 기본 우선순위(Specificity) 동작 방식과 마찬가지로, 소스코드 상에서 더 나중에(아래에) 선언된 속성값으로 덮어써서 최종 병합 규칙이 결정됩니다.
- 미디어 쿼리(@media) 안에 들어 있는 선택자도 중복 정리 대상에 포함되나요?
- 네, @media 블록 안의 선택자는 같은 미디어 쿼리 조건끼리만 서로 비교해 중복을 병합합니다. 다만 조건이 다른 미디어 쿼리에 속한 동일 선택자(예: 기본 스타일과 반응형 스타일)는 적용 상황 자체가 다르므로 별개로 유지되고 합쳐지지 않습니다.
- 미디어 쿼리(@media) 안에 들어 있는 선택자도 중복 정리 대상에 포함되나요?
- 네, @media 블록 안의 선택자는 같은 미디어 쿼리 조건끼리만 서로 비교해 중복을 병합합니다. 다만 조건이 다른 미디어 쿼리에 속한 동일 선택자(예: 기본 스타일과 반응형 스타일)는 적용 상황 자체가 다르므로 별개로 유지되고 합쳐지지 않습니다.