CSS 압축 (Minify)

공백을 함부로 지우면 CSS가 깨집니다

"공백과 주석을 없애면 된다"고 생각하기 쉽지만, CSS에는 공백 자체가 문법인 자리가 있습니다. 정규식으로 밀어 버리는 압축기가 자주 내는 사고 두 가지입니다.

이 도구는 문자열·주석·괄호·중괄호를 상태로 들고 한 글자씩 훑습니다. 괄호 안에서는 연산자 주변 공백을 그대로 두고, 선택자에서는 자손 결합자 공백을 지키며, 콜론 앞 공백은 아예 손대지 않습니다.

무엇을 지우나

• 주석 — 단, /*! 로 시작하는 라이선스 표시는 남깁니다
• 의미 없는 공백과 줄바꿈
• 블록 마지막 선언의 세미콜론
• 선언이 하나도 없는 빈 규칙
• (선택) #aabbcc → #abc, 0.5em → .5em

단위는 건드리지 않습니다. 0px을 0으로 바꾸는 최적화가 흔한데, transition이나 flex-basis처럼 단위가 있어야 하는 자리가 있어서 일부러 뺐습니다. 이 도구는 확실히 안전한 것만 합니다.

얼마나 줄어드나

주석이 많고 들여쓰기가 깊은 손글씨 CSS는 보통 20~35% 줄어듭니다. 이미 빌드 도구를 거친 CSS는 거의 안 줄어듭니다. 결과창 아래에 전후 용량이 나옵니다.

다만 gzip이나 brotli를 쓰고 있다면 실제 전송량 차이는 이보다 훨씬 작습니다. 반복되는 공백은 압축이 아주 잘 되는 패턴이기 때문입니다.