CSS 포맷터

CSS 포맷팅에 대하여

압축은 공백, 주석, 중복된 문자를 제거하여 파일 크기를 줄입니다. 정렬은 들여쓰기와 한 줄에 하나의 규칙으로 다시 펼쳐 살펴보고 편집하기 쉽게 만듭니다.

여기서의 압축은 공백 제거를 살짝 넘어섭니다. 값도 가장 짧은 동등 형태로 다시 쓰여, background-color: white는 background-color:#fff가 되고 color: #ff0000은 color:red가 됩니다. 바이트 수가 더 적은 쪽을 선택하는 것입니다. 어떤 규칙이 실제 페이지에 적용되는지는 분석하지 않습니다. 그것은 "미사용 CSS 제거" 또는 트리 셰이킹이라 불리는 별개의 작업으로, HTML과 JavaScript를 알아야 무엇이 불필요한지 판단할 수 있으며, 이 도구는 작성한 규칙을 모두 그대로 보존합니다. 주석 제거의 예외가 하나 있는데, /*! 로 시작하는 "뱅 주석"은 의도적으로 보존됩니다. 이는 라이선스 표시가 압축 후에도 살아남도록 빌드 도구들이 쓰는 관례입니다.

사용되는 곳

• 프로덕션에 배포하기 전 스타일시트 축소
• 읽거나 편집하기 위해 압축된 CSS 파일 다시 포맷
• 브라우저 검사 패널에서 복사한 스타일 정리
• CSS 차이를 검토하기 전 형식 통일

자주 묻는 질문

압축하면 페이지 모양이 바뀌나요?
아닙니다. 공백과 주석만 제거되며, 모든 선택자, 속성, 값은 작성된 그대로 유지됩니다.

SCSS나 LESS를 지원하나요?
아닙니다, 순수 CSS만 지원합니다. SCSS나 LESS는 먼저 CSS로 컴파일하세요.

스타일시트가 저장되나요?
아닙니다. 변환은 해당 요청에 대해서만 서버에서 처리되며 이후 아무것도 보관되지 않습니다.

페이지에서 실제로 쓰이지 않는 CSS 규칙도 제거해 주나요?
아닙니다. 그것은 다른 작업으로, 보통 "미사용 CSS 제거" 또는 트리 셰이킹이라 불리며, 실제 HTML과 JavaScript를 CSS와 대조해 어떤 셀렉터가 실제로 일치하는지 알아야 합니다. 이 도구는 공백과 불필요한 구문을 제거하고 값을 가장 작은 동등 형태로 줄일 뿐이며, 작성한 규칙은 모두 그대로 나오되 더 압축될 뿐입니다. 압축 후에도 살아남아야 하는 주석이 있다면(예: 라이선스 표시) /* 대신 /*! 로 시작하세요. 그러면 보존됩니다.