CSSフォーマッター

CSSは、セミコロンの後に改行を追加する、波括弧の中でインデントするといった検索置換のルール一式で再整形できるほど単純に見えます — ネスト、メディアクエリ、そしてカスタムプロパティやコンテナクエリのようなモダンな機能が実際にファイルに含まれるまでは。正規表現ベースのアプローチにはネストの深さという本物の概念がまったくないため、複数のネストされたセレクタを含むメディアクエリを正しくインデントできず、宣言を終わらせるセミコロンと、文字列値やカスタムプロパティの中に含まれる任意テキスト内のセミコロンを区別する方法がありません。まずスタイルシートを本物の構造に解析すること — どのルールがどれの中にネストされているか、各ブロックがどこで始まり終わるかを理解すること — が、玩具のような例だけでなく本物の複雑なCSSでも整形を正しく行える理由です。

このツールの圧縮は空白とコメントの削除に限定されています — スタイルシートの中で、それを読む人間のために純粋に存在し、ブラウザのレンダリングエンジンにとっては何の意味も持たない部分です。意図的に重複するセレクタを統合したり、宣言を並べ替えたり、`#ffffff`を`#fff`と書き換えるように色の値を短縮したりはしません。より積極的なミニファイヤーならこの3つすべてを行ってさらに小さいファイルを生成できるでしょうが、それらの変換は見落としやすい形で挙動を変えることがあります: 同じセレクタを持つが並び順の異なる2つのルールを統合すると、競合したときにどの宣言が勝つかが変わることがあり、宣言の並べ替えにも同じリスクがあります。空白の削除だけならそのリスクを負いません — ブラウザが何をレンダリングするかは変えられず、それを記述するのに何バイトかかるかだけが変わります。

Webサーバーはほぼ普遍的にテキストリソースをネットワーク経由で送信する前にgzipまたはbrotliで圧縮しており、どちらの圧縮アルゴリズムも、まさに空白と一貫したインデントが表すような冗長性を利用するのが非常に得意です — 繰り返されるスペースの並びはすでに極めて良く圧縮されます。これは、両方がgzipを通過した後、整形されたスタイルシートと圧縮されたスタイルシートの差が、未圧縮のサイズ差が示唆するよりかなり小さいことを意味します。圧縮は依然として役立ちます。特にコメントを圧縮するだけでなく直接取り除くことでですが、最新ツールが約束するネットワーク転送上の利点の大部分は圧縮から来ており、CSSの圧縮はその上にさらに小さな1層を追加するにすぎないと知っておく価値があります。

SassやLessのファイルを整形するということは、ソースコードに書かれたままの状態に一貫したインデントと間隔を適用することを意味します — ネスト、変数、mixin、制御ディレクティブは、元のプリプロセッサ構文のまま無傷で残ります。これはコンパイルとは完全に異なる操作であり、コンパイルは変数を実際の値に解決し、ネストされたセレクタを独立した平坦なCSSルールに展開し、mixinを実行してその展開された出力を生成します。SCSS入力からコンパイル済みCSSを期待している人は、解決される代わりに同じ変数だらけのネストされたソースコードが整形されているのを見て驚くでしょう — このツールはプリプロセッサ言語のフォーマッターであり、それ用のコンパイラではありません。