CSS 포매터 & 미니파이어

CSS 포매터란?#

CSS 포매터는 반대처럼 보이지만 같은 문제를 푸는 일 두 가지를 합니다. 답답하게 기계 생성된 CSS를 사람이 읽을 수 있게 펼치는 것과, 불어난 스타일시트를 실제로 중요한 바이트들로 압축하는 것입니다. 포매터를 찾게 되는 이유는 거의 항상 CSS가 하는 일에 맞지 않는 모양으로 도착했기 때문입니다. 빌드 도구가 minify된 한 줄을 내뱉어 특정 규칙을 살펴봐야 한다거나, 손으로 쓴 파일이 불어나 배포 전에 다듬고 싶다거나 하는 식입니다.

이 페이지는 두 방향을 진짜 엔진으로 처리합니다. 서식 은 js-beautify의 css_beautify 를 써서 선택자와 선언을 예측 가능하게 다시 들여쓰기합니다. 압축 은 CSSO를 쓰는데, 이것은 공백 제거기가 아니라 진짜 구조적 최적화기입니다. 동일한 선언을 가진 인접 규칙을 합치고, 롱핸드 프로퍼티를 쇼트핸드로 접으며, 덮어쓰인 선언을 제거하고, 그리고 나서야 남은 공백을 붕괴시킵니다. 결과는 보통 단순한 컴팩터가 만드는 것보다 작고, 입력과 의미상 동일합니다. 전송되는 모든 바이트가 중요할 때 이 구분이 의미를 가집니다.

사용 방법#

1. 왼쪽의 CSS 패널에 스타일시트를 붙여넣으세요. 동작을 먼저 시험해 보려면 예제 가 짧은 스타일시트를 불러옵니다.
2. 도구 모음에서 들여쓰기 를 고르세요. 2, 4, 또는 탭. 공백 2칸은 현대적 관례이고, 4칸은 빽빽한 파일을 읽기에 더 좋습니다.
3. 동작 버튼을 누르세요.
   • 서식 — js-beautify를 통해 다시 들여쓰기하고 줄바꿈합니다. 선택자는 제 줄에 놓이고, 선언은 중괄호 안에서 정렬됩니다.
   • 압축 — CSSO의 구조적 최적화를 실행한 뒤 컴팩트한 출력을 내보냅니다. 주석은 제거되고, 중복 규칙은 합쳐지며, 롱핸드는 안전할 때 쇼트핸드로 접힙니다.
4. 출력 패널에서 결과를 읽고 복사 로 가져가세요. 지우기 는 양쪽 패널을 초기화합니다.

입력에 닫히지 않은 규칙이나 깨진 선언이 있으면, 상태 표시줄이 추측하는 대신 오류를 보고합니다.

주요 기능#

• 서식과 압축이 다른 엔진. 뷰티파이는 js-beautify이고, 압축은 CSSO입니다. 하나의 타협된 루틴이 둘 다 하려 하는 대신, 각자 잘하는 한 가지 일을 합니다.
• 압축 시 진짜 최적화. CSSO는 스타일시트를 재구성합니다. .a { color: red } .b { color: red } 를 공유 규칙으로 합치고, margin: 0 0 0 0 을 margin: 0 으로 붕괴시키며, 뒤 규칙이 이미 덮어쓴 선언을 제거합니다. 공백 제거는 유일한 단계가 아니라 마지막 단계입니다.
• 세 가지 들여쓰기 스타일. 공백 2칸, 4칸, 또는 탭. 하나의 메뉴로 전환합니다.
• 나란히 보기, 복사 준비 완료. 입력은 편집 가능하고 출력은 읽기 전용에 한 번 클릭하는 복사 버튼을 가집니다.
• 엄격하게 클라이언트 사이드. CSSO와 js-beautify는 페이지에 꾸려 넣어지고 이 도구를 열 때만 로딩됩니다. 스타일시트는 브라우저에서 처리되고 결코 업로드되지 않습니다.

실전 예시#

두 규칙이 일을 반복하고 롱핸드가 더 짧아질 수 있는 작은 스타일시트입니다.

입력:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

서식 을 2 칸으로 누르면:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

반복이 이제 뚜렷이 보입니다. 포매터가 있는 정확히 이유입니다. 이제 같은 입력에서 압축 을 누르면 CSSO가 구조적으로 다시 씁니다.

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

세 가지가 한꺼번에 일어났습니다. 네 값 padding 은 네 면이 모두 같아서 한 값으로 붕괴되고; 네 개의 margin-* 롱핸드는 margin 쇼트핸드로 접혔으며; 두 color: #ff0000 규칙은 그룹화된 선택자를 가진 단일 규칙으로 합쳐졌습니다(hex는 더 짧은 red 가 되었습니다). 단순한 공백 제거기는 모든 중복 바이트를 그대로 두었을 것입니다. 구조화 최적화기만이 이런 이득을 찾아냅니다.

FAQ#

압축이 페이지의 보이는 모양을 바꾸나요?#

아닙니다, 입력이 올바른 CSS일 때는요. CSSO는 캐스케이드를 보존하는 변환만 적용합니다. 동일한 선언을 가진 규칙 합치기, 값이 모두 같은 롱핸드 접기, 더 구체적이거나 뒤에 오는 규칙이 덮어쓰는 선언 제거. 변환이 모호하다면 건너뜁니다. 서식은 순전히 외양을 다루고 의미를 결코 바꾸지 않습니다.

압축은 제 주석을 유지하나요?#

아닙니다. 주석은 압축 중에 제거되며, /* !important */ 유형의 배너도 포함됩니다. 라이선스 헤더나 빌드 마커가 살아남아야 한다면, 주석이 있는 원본을 유지하고 압축 후 빌드 파이프라인에서 배너를 다시 끼워 넣으세요.

왜 압축한 출력이 가끔 입력보다 더 큰가요?#

거의 항상 입력이 이미 압축되었기 때문입니다. CSSO는 여전히 그것을 파싱하고 다시 내보내야 하며, 이미 컴팩트하고 이미 최적화된 입력에서는 더 얻을 것이 없습니다. 출력은 본질적으로 같은 크기입니다. 손으로 쓰거나 펼쳐진 CSS를 넣으면 절약은 실제입니다.

제 CSS는 서버로 전송되나요?#

아닙니다. 두 엔진 모두 브라우저에서 실행됩니다. 라이브러리는 페이지 자체 번들에서 주문형으로 로딩되어, 스타일시트를 어디로도 실어 나르는 네트워크 요청이 없습니다.