CSS ミニファイア

用途

ソース上で読みやすい CSS（コメント、インデント、意味のある空白を伴うもの）は、ユーザーがダウンロードするファイルを肥大化させます。構造的なミニファイアは、ルールの意味を変えずに見た目用のバイト（コメント、空白の連続、冗長なゼロ、より短い等価な hex コード）をすべて取り除きます。本ツールはその処理をブラウザ内で実行し、ビフォア／アフターのサイズを表示して節約量を確認できます。

使うべきタイミング

• HTML メールやブログテンプレートにインラインで CSS スニペットを単発で送りたいときに、ビルドチェーンなしでバイトを削減したい。
• 本格的なオプティマイザを導入する価値があるか判断する前に、スタイルシートの「贅肉」がどの程度かを素早く確認したい。
• サードパーティのウィジェット用に、配布されている整形済み CSS を圧縮して組み込みたい。

処理内容

• ブロックコメント（/* … */）を削除します。// はそもそも素の CSS としては有効ではありません。
• { } : ; , や結合子（> ~ +）まわりの空白を圧縮します。
• } の前の末尾セミコロンを削除します。
• 先頭の 0 を削除（0.5 → .5）し、ゼロからは単位を削除（0px → 0）します。
• 等価で短く書ける場合は hex 色を短縮（#aabbcc → #abc）します。

よくある注意点

• これは構造的なミニファイで、フルオプティマイザではありません。 重複セレクタの統合、ルールの並び替え、shorthand への書き換えは行いません。それらは cssnano や esbuild をビルドパイプラインで使ってください。
• ソースマップは生成しません。 本番でミニファイ後の CSS をデバッグする場合は別途配布してください。
• ミニファイ済み CSS をコミットしないこと。 ソースは整形済みでコミットし、ビルド／デプロイ時にミニファイします。両者を混ぜると差分レビューが地獄になります。
• 現代では転送時の圧縮が支配的です。 ワイヤ上の Brotli/gzip がミニファイの大部分の効果を担います。最大の削減は未使用ルールの除去から得られ、これはミニファイではなく tree-shaking の仕事です。