私が今までデバッグしなければならなかった最悪のCSSが、40,000 文字の1 行として届きました。 build stepが連結され、プロジェクトのすべての部分が縮小され、終わり近くのルールが本来持たないはずの色をオーバーライドしており、改行がないためにカスケードを見る方法がありませんでした。 wordpressのテーマとReactアプリをまたいで、読めないスタイルシートが修正できないスタイルシートであることを知るのに十分なフロントエンドを出荷したので、 を構築しました css フォーマッタ で Toolz.dev それは、そのテキストの壁を、1 つのペーストでインデントされたスキャン可能な CSS に戻し、出荷の準備ができたら、再び縮小します。これが、そのガイドと、"formatting CSS" actually の意味です。
tl;dr: CSS フォーマッタは、一定の間隔でスタイルシートを再インデントして読み取れるようにし、CSS ミニファイアはその間隔をストリップしてファイルを小さくするように戻します。ツール css フォーマッタ 両方を1 つの入力から実行します。 CSSをルール、セレクタ、宣言、at-rules、コメントに解析し、次にその構造を2 つのスペース、4 つのスペース、またはタブから選択して印刷し直すか、最小の有効な等価物に折りたたみます。ネスト
@mediaあんど@keyframesブロック 、url()値と引用符で囲まれた文字列はすべてそのまま残り、すべてがクライアント側で実行されるため、CSS がブラウザから離れることはありません。
CSSフォーマッタとは何ですか?
CSSフォーマッタはスタイルシートを読み込み 予測可能な一貫性のある空白で書き換えます ルール自体は変わりません セレクタやプロパティや値は 前後で同一で ブラウザはフォーマットされたファイルを 元のファイルを適用したのと全く同じように 適用します 変更されるのはレイアウトです 1行に1つの宣言 各コロン後に1つのスペース 各ブロックは親より1つ深いところでインデントされ 閉じる中括弧は 自身の行でできます その結果は人間がスキャンできるファイルです。
フードの下では、ツールは空白で find-and-replace を行っていないため、ナイーブなフォーマッタがうまくいかないところです。まず CSS を実際の構造に解析します。スタイルシートは、ノードのシーケンスです。セレクターと宣言のブロックをペアにするスタイル ルール。 at-rules のようなものです @media や @import、コメント、そして宣言そのもの.CSS がそれらのノードの木になったら,好きなインデントで印刷しなおすのは簡単で,決定的に,安全です.パーサーは,フォーマッタに,中にカンマがあることを知らせるものです. :not(a, b) はセレクターの一部であり、カンマは間にあります h1 あんど h2 2 つのセレクターを分離し、その中にセミコロンが入っています url() データ URI は宣言の終わりではありません。
同じ解析が逆の操作を駆動します ツールはすでに構造を理解しているため、インデントをまったく行わずにツリーを印刷できます。これがまさに縮小化です。そのため、1 つのツールが両方のジョブをカバーしています。書式設定と縮小化は、同じ解析が 2 つの異なる方法で印刷されます。
CSSの書式設定と縮小化の違いは何ですか?
これらは同じ軸の反対側の端であり、どの方向が欲しいかを知ると混乱が回避されます 美化またはプリティプリントとも呼ばれる書式は、人々の利益のために空白を追加します 縮小すると、機械やネットワークの利益のために、読み取ったコピーをフォーマットして編集します; ブラウザに送信したコピーを縮小します。
区別が重要なのは、それらがワークフローのさまざまなポイントに属しているからです。 CSS を作成している間、または理解する必要があるファイルを継承した場合は、フォーマットする必要があります。デプロイするときは、ブラウザのダウンロードバイト数が減り、ペイントがより早くなるように、ファイルを縮小する必要があります。ほとんどのビルド パイプラインは自動的に縮小されますが、多くの状況はビルドの外側にあります。CodePen から貼り付けられたスニペット、監査しているページから抽出されたスタイルシート、CMS で直接編集されたテーマ ファイルなどです。スタンドアロンのフォーマッターとミニファイアーが最も速いパスです。
分割の概要は次のとおりです。
| アスペクト | フォーマット (美化) | ミニファイ |
|---|---|---|
| 観客 | 読解と編集をする人々 | ダウンロードするブラウザ |
| 空白 | 読みやすさのために追加されました | 完全に削除されました |
| コメント | デフォルトで保持されます | デフォルトで削除されました |
| ファイルサイズ | より大きい | できるだけ小さく |
| いつ使うか | 書き込み、デバッグ、レビュー | 生産への出荷 |
このツールでCSSをフォーマットするにはどうすればよいですか?
フローが意図的に短い CSS を入力に貼り付け、 beautify または minify を選択して結果を読みます beautify する際は、プロジェクト& #39; s エディターの設定に合わせて 2 つのスペース、4 つのスペース、またはタブを選択し、コメントを保持するかどうかを決定します css フォーマッタ バイトの変更を確認できるように出力にサイズ バッジを表示し、不均衡な中括弧などの解析通知をサイレントに失敗するのではなく警告としてリストします。
4 つのステップは実際にはこのようになります まずスタイルシートを貼り付けます ミニ化されているか 手書きか ツールからエクスポートされているか 2 つ目は Beautify をクリックしてインデントし直すか ミニファイ をクリックして削除します 3 つ目は出力とサイズバッジを確認し、警告を一目見ることです 4 つ目は結果をクリップボードにコピーするか、または としてダウンロードします .css ファイルはプロジェクトにドロップする準備ができています。すべてがブラウザで発生するため、アップロード手順もアカウントもありません。
他の構造化フォーマットを操作する場合は、同じパターンが Toolz 全体に表示されます。 the json フォーマッタ JSON を美化し、縮小します html フォーマッタ マークアップについても同じことを行います sql フォーマッタ クエリを処理します。書式設定は一般的なアイデアであり、言語ごとに同じツール形状を持つことで筋肉の記憶に一貫性が保たれます。テーマです Web 開発者ツールキット ガイドはさらに発展します.
フォーマットは私のスタイルの仕組みを変えますか?
いいえ、これがツールを本番 CSS 上で安全に実行できるようにする保証です。タッチ空白と、オプションでコメントのみを追加および縮小します。宣言の順序を変更したり、名前の変更をしたり、ルールをマージまたはドロップしたり、値を書き換えたりすることはありません。セレクターの特異性は変更されず、カスケードを駆動するソース順序も変更されず、ブラウザーで計算された結果はバイト単位で同等です。
これは、明確に述べる価値があります。なぜなら、一部の CSS オプティマイザーは、重複したセレクターをマージしたり、未使用と判断するルールを削除したり、プロパティを並べ替えたりするだけではありません。これらの変換は、特にカスケードや a の場合に、微妙な方法で動作を変更する可能性があります !important が関係している.このフォーマッタは,意図的にそのどれも行わない.空白ツールである.ファイルを美化して何も編集せず,再度ミニファイすると,2 つのファイルは機能的に同一になる.つまり,恐れることなく自由に往復できる.
何が空白としてカウントされ、それが重要ではない場所を定義する CSS 文法は、で指定されています CSS構文モジュール レベル3 W3Cから。 formatterはそのgrammar& #39; s tokenizerモデルに従います、それが文字列トークンまたはa内の空白を扱う理由です url() 宣言間の空白とは異なります.
@media、@keyframes、その他のルールをどのように処理しますか?
at ルールは、カジュアル フォーマッタが崩壊する場所です。at ルールはセミコロンで終わることも、他のルールのブロック全体をラップすることもできるからです。 @import "base.css"; はセミコロンで終わる文です. @media (max-width: 600px) { ... } は、それ自身の入れ子になった規則を含むブロックであり、それらの入れ子になった規則は、より1 つ深いレベルでインデントする必要がある @media 行そのもの。 find-and-replaceアプローチでは、2 つを区別できない; パーサーはできる。
なぜなら、このツールは実際のツリー、つまりネストされたツリーを構築するからです @media block は美化時に内側のルールを正しくインデントし、縮小時に正しく折りたたんだままにします。 にも同じことが当てはまります @supports 機能クエリと機能 @keyframes 各パーセンテージのステップが気に入ったアニメーション 0% あんど 100% はアニメーション内部にあるそれ自身のブロックです。 in のフォント宣言 @font-face と 重ね @layer ルールは同じように扱われます。 stylesheet が到達するネストの深さは何であれ、インデントはそれを追跡します。
この構造認識は、構文のように見えるがそうではない値の部分も保護します。 A url() セミコロンとコロンを含むbase64 が詰まったデータURIを含むことができ、a content プロパティは、中括弧やカンマを含む引用文字列を保持できます。 formatter は引用文字列と の内部を残します url() 書かれたとおりの値なので、フォントパス、SVG データ URI、または生成されたコンテンツテキストの一部が折りたたまれたり、再配置されたり、壊れたりすることはありません。画像をデータ URI として頻繁に埋め込む場合は、 画像をbase64 に ツールはこれと自然にペアになります。
CSS を縮小するとファイルがどのくらい小さくなりますか?
それは完全にソースに含まれる空白の量とコメントの数によって異なりますが、節約は本物です。寛大なインデントとドキュメントのコメントで書かれたスタイルシートは、通常、その空白がなくなると 20 ～ 40 パーセント縮小します。すでにかなりコンパクトだったファイルの縮小は少なくなります。ツールのサイズ バッジには、ファイルの正確な前後バイト数が表示されるため、推測する必要はありません。
CSS はレンダーブロックであるため、これらのバイトは重要です。ブラウザは、ドキュメントヘッドで CSS をダウンロードして解析するまでページをペイントしないため、スタイルシートのすべてのキロバイトは、ユーザーがページを最初に確認するまでの間のキロバイトになります。最小化は、利用可能な最も安価なパフォーマンスの 1 つです。コードの変更や動作のリスクがなく、ワイヤ上のバイト数が減るだけです。最小化に加えて、サーバー層での gzip または Brotli 圧縮によりファイルがさらに縮小され、インデントを削除すると意味のあるトークンがより高密度になるため、最小化された CSS は適切に圧縮されます。
ミニファイイングは、この作品のいとこです css ミニファイア する、そして css ミニファイアガイド 圧縮側ではさらに深くなります 両方が存在する理由は利便性です ファイルをクリーンアップするためにフォーマッタに着地し 同じ場所でミニファイしたい時もあります ミニファイアに直行することもあります いずれにしても 基礎となる解析は同じです。
コメントを保持し、インデントを制御できますか?
両方に「はい」があり、これら 2 つのオプションは、ワンサイズ フォーマッタが見逃すケースをカバーします。 「コメント」は、CSS を読んだり編集したりしているときにコメントが最も役立つ部分であることが多いため、美化するときにデフォルトで保持されます。 「ミニファイ」の場合、コメントはデフォルトで削除されてすべてのバイトが保存されますが、ファイルにライセンス ヘッダーや著作権表示が保存されている場合に必要な保存のトグルがあります。出荷されたバンドルに保存する必要があります。
インデントはチームが同意しないため選択であり、フォーマッターのポイントは、1 つのルールを一貫して適用することで不一致を終わらせることです。 2 つのスペースは、現代のフロントエンドプロジェクトで最も一般的なデフォルトであり、4 つのスペースは、他の場所でそれを使用するコードベースに適しており、タブは、アクセシビリティまたは個人設定に好むチームに適しています。 出力内の 1 つとすべてのブロックを選択します。一貫性は全体の値です。フォーマッターは、そうでなければプロジェクト全体でファイルごとにドリフトする小さな手動の決定を削除するため、正確に使用する価値があります。この方法でツールを標準化するためのより広範なケースが流れています 開発者の生産性向上ツール ガイド.
フォーマットが実際に解決する日常的な問題は何ですか?
私が開いた 40,000 文字の行は劇的なケースですが、ありふれたものははるかに頻繁に登場します。 browser's dev ツールからルールをコピーすると、ファイルと一致しない計算された速記と一貫性のない間隔で届きます。フォーマッターを実行したことのない請負業者からスタイルシートを継承するため、ブレース スタイルとインデントは数百行ごとにシフトします。ブログ投稿からのスニペットや、プロジェクトがスペースを使用するタブを使用するデザイン ツールを貼り付けます。これらのいずれにおいても、CSS は機能しますが、一致しません。一致しないファイルは、今後のすべての編集を遅くし、すべての差分を混乱させるファイルです。
このようなファイルをフォーマッターで実行すると、そのすべてが一度に正規化されます すべてのブロックが同じインデントを取得し、すべての宣言が独自の行に着地し、その後コミットする差分は、空白ノイズの嵐ではなく、実際に行った変更のみを表示します その最後のポイントは静かな生産性の勝利です: 一貫してフォーマットされたコードベースはクリーンな差分を生成し、クリーンな差分はコードレビューをより速く、回帰を見つけやすくします フォーマットは表面的なものではありません それは、スタイルシートが成長するにつれて読みやすくするものであり、すべての深刻なフロントエンドプロジェクトが最終的に1 つのレイアウトを標準化し、それを強制する理由です 開発者の生産性向上ツール このガイドでは、ワークフローからこの種の手動摩擦を取り除くための広範なケースを作成します。
機密性の高い CSS または独自の CSS をフォーマットしても安全ですか?
はい、これは脚注ではなく意図的な設計決定です。すべての解析と書式はブラウザ内の JavaScript で行われます。スタイルシートはサーバーにアップロードされず、何もログに記録されず、ページがロードされるとツールは接続をオフにして作業を続けます。内部クラス名、未リリースのデザイン システム トークン、または出荷されていない機能の構造を含む CSS を、マシンから離れることなくフォーマットできます。
これは思われるよりも重要です なぜならスタイルシートは意図を漏らす可能性があるからです クラス名やカスタムプロパティ名は、まだ公開されていない機能を電信することが多く、コンポーネントの構造& #39; s CSSは、製品の構築方法を明らかにすることができます サーバーサイドフォーマッタは、評判が良いとしても、その情報を渡しているサードパーティです クライアントサイドツールは、質問を完全に削除します 開発者データをサーバー上ではなくブラウザで処理する背後にある推論は、の主題です データプライバシー オンラインツール ガイド、およびそれは内のすべてのツールに適用されます コーディング ツール 収集だ この1 つだけじゃない プライバシーが自由なら 諦める理由はない。
よくある質問
CSSをオンラインでフォーマットするにはどうすればよいですか?
入力領域にCSSを貼り付けて「美化」をクリックします ツールはスタイルシートを解析し 1行1 つの宣言と 一貫したインデントで書き換えます すべてブラウザで実行されるため アップロードされるものはありません。
CSSの書式設定と縮小化の違いは何ですか?
フォーマットは美化とも呼ばれ、インデントと改行を追加して CSS を人々が読み取れるようにする一方、縮小すると不要な空白とコメントがすべて削除されるため、ブラウザーにとってファイルができるだけ小さくなります。このツールは両方を同じ入力から実行します。
CSSの書式設定は、私のスタイルの仕組みを変えますか?
いいえ 美化および縮小は空白とコメントのみを変更し、ルール、セレクター、値は変更しません。ブラウザは、元のスタイルシートを適用するのとまったく同じ方法で、フォーマットされたスタイルシートを適用します。
@media と @keyframes を正しく処理しますか?
はい。 @media、@supports、@keyframe などのネストされたルールはブロックとして解析されるため、美化するときは内部のルールが 1 レベル深くインデントされ、縮小するときは元の状態に保たれます。
url()の値やコンテンツの文字列を破るのでしょうか?
いいえ フォーマッタは引用符で囲まれた文字列と url()値の内側を記述されたとおりに残すため、データ URI、フォント パス、コンテンツ テキストが折りたたまれたり、間隔が空いたりすることはありません。
ミニ化すると CSS がどれくらい小さくなりますか?
ファイルに含まれる空白の量とコメントの数によって異なりますが、読み取り可能なスタイルシートは通常、インデントとコメントが削除されると 20 ～ 40 パーセント縮小します。サイズ バッジには、ファイルの正確なバイト変更が表示されます。
縮小時にコメントを保持できますか?
はい。 comments を保持するトグルがあります。 lause it off for the smallest output, or turn it on when you need to keep a license header or authoring notes in the minified file.
ここで機密CSSをフォーマットしても安全ですか?
はい。すべての解析と書式はブラウザ内の JavaScript で行われます。スタイルシートはサーバーに送信されず、何も記録されず、ツールは接続を無効にして動作します。
ザ・ css フォーマッタ は無料で、ブラウザで完全に実行され、サインアップは必要ありません。スタイルシートを美化して読み込み、ミニ化して出荷し、40,000 文字の行をデバッグすることは二度とありません。それと残りの部分を探索します コーディング ツール Toolz.dev で。
