내가 디버그해야 했던 최악의 CSS는 단일 40,000자 줄로 도착했습니다. 빌드 단계에서 프로젝트의 모든 부분을 연결하고 축소했으며, 끝 부분에 있는 규칙은 가져서는 안 되는 색상을 재정의하고 있었고, 줄 바꿈이 없었기 때문에 캐스케이드를 볼 방법이 없었습니다. 읽을 수 없는 스타일시트가 수정할 수 없는 스타일시트라는 것을 알 수 있도록 WordPress 테마와 React 앱 전반에 걸쳐 충분한 프런트 엔드를 배송했기 때문에 다음을 구축했습니다 css 포맷터 에 Toolz.dev 그것은 텍스트의 그 벽을 다시 들여쓰기,스캔 가능한 CSS 로 한 페이스트에 돌리고,배송할 준비가 되면 다시 축소시킵니다. 이것은 그것에 대한 가이드이며 무엇에 "formatting CSS" 실제로 의미합니다.
TL;DR: CSS 포맷터는 일관된 간격으로 스타일시트를 다시 들여쓰기하여 읽을 수 있게 하고,CSS 축소기는 파일이 작도록 다시 간격을 두는 것을 제거합니다. The Toolz css 포맷터 하나의 입력에서 두 가지를 모두 수행합니다. CSS 를 규칙,선택기, 선언,at-규칙 및 주석으로 구문 분석 한 다음 두 개의 공백,네 개의 공백 또는 탭 중에서 선택한 구조로 다시 인쇄하거나 가장 작은 유효한 등가물로 축소합니다. 중첩
@media그리고@keyframes블록,url()값과 인용된 문자열은 모두 그대로 유지되며 모든 것이 클라이언트 측에서 실행되므로 CSS가 브라우저를 떠나지 않습니다.
CSS 포맷터 란 무엇입니까?
CSS 포맷터는 스타일시트를 읽고 예측 가능하고 일관된 공백으로 다시 작성합니다. 규칙 자체는 변경되지 않습니다. 선택기,속성 및 값은 전후에 동일하며 브라우저는 원본에 적용했을 형식화된 파일을 그대로 적용합니다. 변경되는 것은 레이아웃입니다: 줄당 하나의 선언,각 콜론 뒤에 하나의 공백,부모보다 한 단계 더 깊은 들여쓰기된 각 블록,자체 줄에 닫는 중괄호. 그 결과는 사람이 스캔할 수 있는 파일입니다.
후드 아래에서 도구는 순진한 포맷터가 잘못되는 공백에서 찾기 및 바꾸기를 수행하지 않습니다. CSS 를 실제 구조로 먼저 구문 분석합니다. 스타일시트는 노드의 시퀀스입니다: 선택기를 선언 블록과 페어링하는 스타일 규칙,at-rules 와 같습니다 @media 또는 @import,코멘트, 그리고 선언들 그 자체. 일단 CSS 가 그 노드들의 트리라면,당신이 좋아하는 어떤 들여쓰기로 다시 출력하는 것은 간단하며 결정적으로 안전하다. 파서는 포맷터가 내부에 쉼표가 있음을 알게 하는 것이다 :not(a, b) 는 선택기의 일부이고 그 사이에는 쉼표가 있습니다 h1 그리고 h2 두 개의 선택기를 분리하고 그 안에 세미콜론이 있습니다 url() 데이터 URI는 선언의 끝이 아닙니다.
동일한 구문 분석은 역방향 작업에 전원을 공급합니다. 도구가 이미 구조를 이해하고 있기 때문에 들여쓰기 없이 트리를 인쇄할 수 있으며 이것이 바로 축소 작업입니다. 이것이 바로 하나의 도구가 두 작업을 모두 다루는 이유입니다: 포맷과 축소는 두 가지 다른 방식으로 인쇄된 동일한 구문 분석입니다.
CSS 를 포맷하고 축소하는 것의 차이점은 무엇입니까?
이것들은 같은 축의 반대쪽 끝이며,원하는 것을 알면 혼란을 덜어줍니다. 미화 또는 예쁜 인쇄라고도하는 포맷팅은 사람들의 이익을 위해 공백을 추가합니다. 축소하면 기계와 네트워크의 이익을 위해 공백을 읽고 편집 한 사본을 포맷합니다; 당신은 브라우저로 보내는 사본을 축소합니다.
구별은 워크플로의 다른 지점에 속하기 때문에 중요합니다. CSS 를 작성하는 동안 또는 이해해야 할 파일을 상속받은 경우 포맷을 지정하기를 원합니다. 배포할 때 브라우저가 더 적은 바이트를 다운로드하고 더 빨리 페인팅할 수 있도록 축소하기를 원합니다. 대부분의 빌드 파이프라인은 자동으로 축소되지만 많은 상황이 빌드 외부에 있습니다: CodePen 에서 붙여넣은 스니펫,감사하는 페이지에서 추출한 스타일시트,CMS 에서 직접 편집한 테마 파일. 그런 경우 독립형 포맷터와 축소기가 가장 빠른 경로입니다.
여기 한눈에 분할이 있습니다.
| 측면 | 포맷 (뷰티파이) | 축소하다 |
|---|---|---|
| 청중 | 읽고 편집하는 사람들 | 브라우저 다운로드 |
| 공백 | 가독성을 위해 추가 | 완전히 제거되었습니다 |
| 코멘트 | 기본적으로 유지됩니다 | 기본적으로 제거되었습니다 |
| 파일 크기 | 더 크게 | 가능한 한 작게 |
| 언제 사용할 것인가 | 쓰기, 디버깅, 검토 | 생산으로 배송 |
이 도구로 CSS를 포맷하려면 어떻게해야합니까?
흐름은 의도적으로 짧습니다. CSS 를 입력에 붙여넣고,beautify 또는 minify 를 선택하고,결과를 읽습니다. beautify 할 때 project's 편집기 설정과 일치하도록 두 칸,네 칸 또는 탭을 선택하고,주석을 유지할지 여부를 결정합니다. The css 포맷터 바이트 변경을 볼 수 있도록 크기 배지가 있는 출력을 표시하고, 불균형 중괄호와 같은 구문 분석 알림을 자동으로 실패하지 않고 경고로 나열합니다.
네 단계는 실제로 이렇게 보입니다. 먼저 스타일시트가 축소되었거나 손으로 작성되었거나 도구에서 내보내졌는지 여부를 붙여넣습니다. 둘째,Beautify 를 클릭하여 다시 들여쓰기하거나 Minify 를 클릭하여 제거합니다. 셋째,출력과 크기 배지를 검토하고 경고를 한눈에 살펴봅니다. 넷째,결과를 클립보드에 복사하거나 a 로 다운로드합니다 .css 프로젝트에 드롭할 준비가 된 파일. 업로드 단계도 없고 계정도 없습니다. 브라우저에서 모든 일이 발생하기 때문입니다.
다른 구조화된 형식으로 작업하는 경우 동일한 패턴이 Toolz 전체에 나타납니다. The json 포맷터 JSON을 아름답게 하고 축소합니다 html 포맷터 마크업에도 동일하게 수행됩니다 sql 포맷터 쿼리를 처리합니다. 포맷은 일반적인 아이디어이며,각 언어에 대해 동일한 도구 모양을 가지면 근육 기억이 일관되게 유지됩니다. 테마 the 웹 개발자 툴킷 가이드는 더욱 발전합니다.
서식이 내 스타일 작동 방식을 변경합니까?
아니요,그리고 이것은 프로덕션 CSS 에서 도구를 안전하게 실행할 수 있도록 보장하는 것입니다. 터치 공백 및 선택적으로 주석만 아름답게 하고 축소합니다. 선언을 재정렬하지 않고,아무것도 이름을 바꾸지 않으며,규칙을 병합하거나 삭제하지 않으며,값을 다시 작성하지 않습니다. 선택기의 특이성은 변경되지 않으며,캐스케이드를 구동하는 소스 순서는 변경되지 않으며,브라우저에서 계산된 결과는 바이트당 바이트와 동일합니다.
일부 CSS 최적화 프로그램은 축소하는 것 이상의 작업을 수행하기 때문에 이는 분명히 언급할 가치가 있습니다: 중복 선택기를 병합하고, 사용하지 않은 것으로 판단되는 규칙을 삭제하고, 속성을 재정렬합니다. 이러한 변환은 특히 캐스케이드 또는 a일 때 미묘한 방식으로 동작을 변경할 수 있습니다 !important 가 관여한다. 이 포맷터는 일부러 그런 일을 하지 않는다. 공백 도구이다. 파일을 아름답게 하고 아무것도 편집하지 않고 다시 축소하면 두 파일이 기능적으로 동일하므로 두려움 없이 자유롭게 왕복할 수 있다.
공백으로 간주되는 항목과 공백이 중요하지 않은 항목을 정의하는 CSS 문법이 에 지정되어 있습니다 CSS 구문 모듈 레벨 3 W3C 에서. 포맷터는 그 grammar's tokenizer 모델을 따르며,이것이 문자열 토큰 또는 a 내부의 공백을 처리하는 이유입니다 url() 선언 사이의 공백과 다릅니다.
@media, @keyframes, 그리고 다른 at-rules를 어떻게 처리하나요?
At 규칙은 캐주얼 포맷터가 무너지는 곳입니다. at 규칙은 세미콜론으로 끝나거나 다른 규칙 블록 전체를 감쌀 수 있기 때문입니다. @import "base.css"; 는 세미콜론에서 끝나는 문이다. @media (max-width: 600px) { ... } 는 자체 중첩 규칙을 포함하는 블록이며, 해당 중첩 규칙은 보다 한 단계 더 깊게 들여쓰기되어야 합니다 @media 선 자체. 찾기 및 바꾸기 접근법은 두 가지를 구분할 수 없습니다; 파서는 할 수 있습니다.
이 도구는 중첩된 실제 트리를 구축하기 때문입니다 @media 블록은 내부 규칙을 아름답게 할 때 올바르게 들여쓰기하고 축소할 때 올바르게 접힌 상태로 유지합니다. 에 대해서도 마찬가지입니다 @supports 기능 쿼리 및 for @keyframes 각 백분율 단계가 같은 애니메이션입니다 0% 그리고 100% 는 애니메이션 내부의 자체 블록입니다. 글꼴 선언 in @font-face 그리고 레이어드 @layer 규칙은 같은 방식으로 처리됩니다. 스타일시트가 중첩 깊이에 도달하면 들여쓰기가 이를 추적합니다.
이러한 구조적 인식은 구문처럼 보이지만 그렇지 않은 값의 부분도 보호합니다. A url() 세미콜론과 콜론을 포함하는 base64로 채워진 데이터 URI를 포함할 수 있습니다 content 속성은 그 안에 중괄호나 쉼표가 있는 인용 문자열을 보유할 수 있습니다. 포맷터는 인용 문자열의 내부를 떠나고 url() 쓰여진 것과 정확히 같은 값이므로 글꼴 경로,SVG 데이터 URI 또는 생성된 콘텐츠 텍스트 조각은 절대로 축소되거나 다시 간격을 두거나 깨지지 않습니다. 이미지를 데이터 URI 로 자주 삽입하는 경우,the 이미지 투 base64 도구는 자연스럽게 이것과 짝을 이룹니다.
CSS 를 축소하면 파일이 얼마나 작아 지나요?
소스에 포함된 공백의 양과 주석의 수에 전적으로 의존하지만 절감 효과는 현실입니다. 넉넉한 들여쓰기와 문서 주석으로 작성된 스타일시트는 일반적으로 공백이 사라지면 20~40 퍼센트 줄어듭니다. 이미 상당히 컴팩트했던 파일은 축소율이 적습니다. 도구의 크기 배지는 파일의 정확한 전후 바이트 수를 표시하므로 추측할 필요가 없습니다.
CSS 가 렌더링 차단이기 때문에 그 바이트는 중요합니다. 브라우저는 문서 헤드에서 CSS 를 다운로드하고 구문 분석 할 때까지 페이지를 칠하지 않으므로 스타일 시트의 모든 킬로바이트는 사용자와 페이지를 처음 보는 것 사이의 킬로바이트입니다. 최소화는 사용 가능한 가장 저렴한 성능 승리 중 하나입니다: 코드 변경 없음,행동에 대한 위험 없음,와이어의 바이트 수가 적습니다. 최소화 외에도 서버 계층의 gzip 또는 Brotli 압축은 파일을 더 축소시키고 들여쓰기를 제거하면 의미있는 토큰 밀도가 높아지기 때문에 축소 된 CSS 가 잘 압축됩니다.
Minifying은 헌신적인 작품의 가까운 사촌입니다 css 축소기 그렇습니다 css 축소기 가이드 압축 측면에서 더 깊이 들어갑니다. 둘 다 존재하는 이유는 편리함입니다: 때로는 파일을 정리하기 위해 포맷터에 착륙하고 같은 장소에서 축소하려고하며 때로는 축소기로 바로 이동합니다. 어느 쪽이든 기본 구문 분석은 동일합니다.
내 의견을 유지하고 들여쓰기를 제어할 수 있나요?
두 가지 모두에 예,그리고 이 두 가지 옵션은 단일 크기 포맷터가 놓친 경우를 다룹니다. 주석은 미화 할 때 기본적으로 유지됩니다. 왜냐하면 CSS 를 읽고 편집하는 동안 주석은 종종 가장 유용한 부분이기 때문입니다. 축소 할 때 주석은 기본적으로 모든 바이트를 저장하기 위해 제거되지만 파일이 라이센스 헤더 또는 배송 된 번들에 남아 있어야하는 저작권 표시를 가지고있을 때 원하는 보존하기위한 토글이 있습니다.
들여쓰기는 팀이 동의하지 않기 때문에 선택이며 포맷터의 요점은 하나의 규칙을 일관되게 적용하여 불일치를 끝내는 것입니다. 두 개의 공백은 최신 프런트 엔드 프로젝트에서 가장 일반적인 기본값이고,네 개의 공백은 다른 곳에서 사용하는 코드베이스에 적합하며,탭은 접근성이나 개인 구성을 위해 선호하는 팀에 적합합니다. 하나를 선택하면 출력의 모든 블록이 이를 따릅니다. 일관성은 전체 값입니다: 포맷터는 프로젝트 전체에서 파일별로 드리프트되는 작은 수동 결정을 제거하기 때문에 정확하게 사용할 가치가 있습니다. 이러한 방식으로 툴링을 표준화하기 위한 더 넓은 경우가 실행됩니다 개발자 생산성 도구 가이드.
서식 지정은 실제로 어떤 일상적인 문제를 해결합니까?
내가 열었던 40,000 자 라인은 극적인 경우이지만 평범한 것들은 훨씬 더 자주 나타납니다. 당신은 browser's dev 도구에서 규칙을 복사하고 계산 된 속기와 파일과 일치하지 않는 일관성없는 간격으로 도착합니다. 당신은 포맷터를 실행 한 적이없는 계약자로부터 스타일 시트를 상속받으므로 몇 백 줄마다 스타일과 들여 쓰기가 이동합니다. 당신은 블로그 게시물의 스니펫이나 프로젝트가 공백을 사용하는 탭을 사용하는 디자인 도구를 붙여 넣습니다. 이 모든 것에서 CSS 는 작동하지만 일치하지 않으며 일치하지 않는 파일은 모든 향후 편집 속도를 늦추고 모든 차이를 흐리게하는 파일입니다.
포맷터를 통해 이러한 파일을 실행하면 모든 파일이 한 번에 정상화됩니다. 모든 블록은 동일한 들여쓰기를 얻고 모든 선언은 자체 라인에 도달하며 나중에 커밋하는 diff 는 공백 잡음의 폭풍우가 아닌 실제로 변경한 내용만 표시합니다. 마지막 요점은 조용한 생산성 승리입니다: 일관되게 포맷된 코드베이스는 깔끔한 diff 를 생성하고 깔끔한 diff 는 코드 검토를 더 빠르게 만들고 회귀를 더 쉽게 찾아낼 수 있습니다. 포맷팅은 외관상 스타일시트가 커짐에 따라 읽을 수 있게 유지하는 것이며 모든 심각한 프런트 엔드 프로젝트가 결국 하나의 레이아웃을 표준화하고 이를 시행하는 이유입니다. 그만큼 개발자 생산성 도구 가이드는 작업 흐름에서 이러한 종류의 수동 마찰을 제거하기 위한 더 넓은 사례를 제공합니다.
민감한 CSS 또는 독점 CSS 를 포맷하는 것이 안전합니까?
예,그리고 이것은 각주보다는 의도적인 디자인 결정입니다. 모든 구문 분석과 서식은 브라우저 내부의 JavaScript 에서 발생합니다. 스타일시트가 서버에 업로드되지 않고,아무것도 기록되지 않으며,페이지가 로드되면 도구가 연결을 꺼둔 상태로 계속 작동합니다. 내부 클래스 이름,미공개 디자인 시스템 토큰 또는 발송되지 않은 기능의 구조가 포함된 CSS 를 어떤 것도 머신을 떠나지 않고 포맷할 수 있습니다.
이것은 보일지도 모르다 보다는 더 많은 것을,stylesheet 가 의도를 유출할 수 있기 때문에,중요하다. 종류 이름 및 주문 재산 이름은 수시로 아직 공중이 아닌 기능을 전신하고,component's CSS 의 구조는 제품이 어떻게 건축되는지 계시할 수 있다. 서버 측 체재자는,그러나 평판 좋은,당신이 그 정보를 건네는 제 3 자이다. 클라이언트 측 공구는 질문을 완전히 제거한다. 서버에 보다는 오히려 브라우저에 있는 개발자 자료를 가공하는 뒤에 추론은 의 주제이다 데이터 개인 정보 보호 온라인 도구 가이드이며, 이는 가이드의 모든 도구에 적용됩니다 코딩 도구 컬렉션,이것뿐만이 아니라,사생활이 자유로울 때,포기할 이유가 없다.
자주 묻는 질문
온라인에서 CSS를 포맷하려면 어떻게 해야 하나요?
입력 영역에 CSS 를 붙여넣고 Beautify 를 클릭합니다. 이 도구는 스타일시트를 구문 분석하고 한 줄에 하나의 선언과 일관된 들여쓰기로 다시 작성합니다. 모든 것이 브라우저에서 실행되므로 아무 것도 업로드되지 않습니다.
CSS 를 포맷하고 축소하는 것의 차이점은 무엇입니까?
또한 beautifying 라고 포맷은 들여쓰기와 줄 바꿈을 추가하므로 CSS 는 사람들이 읽을 수 있으며,축소하면 불필요한 공백과 주석을 모두 제거하므로 파일은 브라우저에서 가능한 한 작습니다. 이 도구는 동일한 입력에서 두 가지를 모두 수행합니다.
CSS를 포맷하면 스타일이 작동하는 방식이 변경됩니까?
아니요. 아름답게 하고 축소하는 것은 공백과 주석만 변경하고 규칙,선택자 또는 값은 변경하지 않습니다. 브라우저는 원본을 적용하는 것과 정확히 같은 방식으로 포맷된 스타일시트를 적용합니다.
@media 와 @keyframes 를 올바르게 처리합니까?
예. @media, @supports, @keyframe 과 같은 중첩된 at-규칙은 블록으로 구문 분석되므로,내부 규칙은 아름답게 할 때 한 단계 더 깊게 들여쓰기되고 축소할 때는 그대로 유지됩니다.
url() 값이나 콘텐츠 문자열을 깰까요?
아니요. 포맷터는 인용된 문자열과 url() 값의 내부를 쓰여진 그대로 그대로 두므로 데이터 URI, 글꼴 경로 및 콘텐츠 텍스트는 축소되거나 다시 간격을 두지 않습니다.
축소하면 CSS가 얼마나 작아지나요?
공백의 양과 파일에 포함된 주석 수에 따라 다르지만,읽을 수 있는 스타일시트는 들여쓰기와 주석이 제거되면 일반적으로 20~40 퍼센트가 줄어듭니다. 크기 배지는 파일의 정확한 바이트 변경을 보여줍니다.
축소할 때 내 의견을 유지할 수 있나요?
예. 주석을 보존하기 위한 토글이 있습니다. 가장 작은 출력을 위해 꺼두거나,축소된 파일에 라이센스 헤더나 저작 노트를 유지해야 할 때 켜십시오.
민감한 CSS 를 여기서 포맷하는 것이 안전합니까?
예. 모든 구문 분석 및 서식은 브라우저 내부의 JavaScript 에서 발생합니다. 스타일시트가 서버로 전송되지 않고 아무것도 기록되지 않으며 도구가 연결을 비활성화한 상태에서 작동합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 css 포맷터 무료이며 브라우저에서 완전히 실행되며 가입이 필요하지 않습니다. 스타일시트를 아름답게 읽어 배송하고 40,000 자 줄을 다시 디버깅하지 마십시오. 탐색 및 나머지 코딩 도구 Toolz.dev에서.
