CSS 포맷터

CSS 포맷터는 스타일시트를 읽고 일관된 간격, 들여쓰기 및 줄 바꿈으로 다시 작성하므로 읽고 유지하기 쉽습니다. CSS를 규칙, 선택기, 선언, at-규칙 및 주석의 기본 구조로 구문 분석한 다음 예측 가능한 레이아웃을 사용하여 해당 구조를 다시 인쇄합니다: 줄당 하나의 선언, 각 콜론 뒤의 단일 공간, 부모보다 한 단계 더 깊은 들여쓰기된 각 중첩 블록 스타일 규칙은 동일하게 유지되지만 하나의 긴 끊어지지 않은 줄로 도착한 파일은 스캔하고 편집할 수 있는 것이 됩니다.

동일한 도구는 CSS 축소기와 반대로 작동합니다. 축소 모든 공간,탭, 줄 바꿈 및 (선택적으로) 브라우저가 필요하지 않은 주석 스트립,스타일 시트를 가장 작은 바이트 - 바이트 등가물로 축소합니다. 잘 포맷 된 6 KB 스타일 시트는 종종 공백이 사라지면 4 KB 아래로 떨어지며,이는 네트워크를 통해 더 적은 바이트와 더 빠른 첫 번째 페인트를 의미합니다. 작성 및 디버깅하는 동안 아름답게; 생산에 배송하는 복사본을 축소합니다.

이 포맷터는 순진한 찾기 및 바꾸기 스크립트를 트립하는 CSS 의 부분을 이해합니다. @media 및 @supports 와 같은 중첩된 at-규칙은 내부 규칙을 올바르게 들여쓰기하고,백분율 단계가 있는 @keyframes 블록은 보존되며,콘텐츠 및 url() 값의 문자열 리터럴은 작성된 대로 정확하게 남고,요청 시 주석은 유지 또는 제거됩니다. 모든 것은 브라우저에서 완전히 실행되므로 독점 디자인 토큰이나 내부 클래스 이름을 포함한 스타일시트는 업로드되지 않으며 연결되지 않은 상태에서도 페이지가 로드된 후에도 도구가 계속 작동합니다.

작은 테스트는 이 CSS 포맷터가 온라인에서 하는 일을 보여줍니다. @media (max-width:600px){.nav a,.nav button{padding:8px 12px;color:#333}}를 붙여넣고 2 칸으로 Beautify 를 클릭합니다. 미디어 쿼리는 자체 블록을 열고.nav a 와.nav 버튼은 한 레벨의 별도 줄로 이동하며 각 선언은 콜론 뒤에 공백이 있는 자체 줄에 위치합니다. 크기 배지는 73 B → 98 B, +34%로 읽혀집니다. 들여쓰기가 바이트를 추가하기 때문입니다. 해당 출력에서 Minify 를 클릭하면 원래 73 바이트로 돌아갑니다.