CSS フォーマッタ

CSS フォーマッタはスタイルシートを読み込み、一貫した間隔、インデント、改行で書き換えるので、読みやすく、保守も簡単です。 CSS をルール、セレクター、宣言、at ルール、コメントの基礎となる構造に解析し、予測可能なレイアウトを使用してその構造を印刷して戻します。行ごとに 1 つの宣言、各コロンの後に 1 つのスペース、親より 1 レベル深くインデントされた各ネストされたブロック。スタイル ルールは同一ですが、1 つの長い途切れることのない行として到着したファイルは、スキャンして編集できるものになります。

同じツールは、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をクリックします。 mediaクエリは独自のブロックを開き、.nav aと.navボタンは1 レベルで別々の行に進み、各宣言はコロンの後にスペースを持つ独自の行に座ります。サイズバッジは73 B→98 Bと読みます。インデントがバイトを追加するため+34%。その出力でMinifyをクリックすると、元の73 バイトに戻ります。