CSSをオンラインで整形
圧縮されたスタイルシートを読みやすく整えます。セレクターや宣言をそれぞれの行に分け、ブロックやメディアクエリーを、手書きするときのようにインデントします。
本番環境のCSSが1行になる理由
スタイルシートを圧縮する理由はスクリプトと同じです。CSSはレンダリングをブロックするため、1バイトの削減もページの表示速度に直接影響します。cssnano、Lightning CSS、SassやPostCSSに組み込まれた最適化ツールは、空白とコメントを除き、色の値を短縮し、重複ルールを統合し、ブロック末尾のセミコロンを削除します。ユーティリティ型フレームワークではさらに密度が高くなり、コンパイル済みのTailwindスタイルシートには、ほとんど隙間なく数千の小さなルールが並ぶことがあります。
カスケードを読み解く
スタイルシートを整形する主な目的は、なぜあるルールが適用されるのか、または適用されないのかを理解することです。セレクターが独立した行に並び、その下に宣言がインデントされると、カスケードを正しく追えるようになります。要素を対象とするルールを探し、詳細度を比べ、記述順を確認し、意図せず指定を上書きしているimportantを見つけられます。メディアクエリーとその内容もブロックとして見えるため、圧縮されたファイルよりレスポンシブな動作を調べやすくなります。
新しいCSSにも対応
フォーマッターは、古いCSSの一部だけでなく、現在の構文を理解します。カスタムプロパティ、calcやclampの式、gridやflexboxの一括指定、コンテナークエリー、入れ子のルール、カスケードレイヤー、supportsブロック、keyframesに対応しています。長いセレクターの一覧は読みやすく改行され、ビルド後も残っているコメントは保持されます。標準CSSとベンダープレフィックス付きのプロパティが混在していても、どちらも内容を保ったまま見やすく配置します。
コンパイル済みフレームワークを読むコツ
TailwindやBootstrapのコンパイル済みスタイルシートを整形すると、数万行になることも珍しくありません。行番号を表示し、スクロールだけに頼らず、ブラウザーの検索で目的のクラス名やプロパティを探してください。読むのではなくファイルを小さくしたい場合は、ビルド設定を見直すことが大切です。使われていないルールも、圧縮が始まる前の段階で生成されているためです。
よくある質問
コンパイル済みのTailwindスタイルシートも整形できますか？
はい。このページの代表的な用途の一つです。ユーティリティクラスごとにルールが生成されるため、出力は非常に長くなります。行番号を表示し、ブラウザーの検索を使うと効率よく確認できます。
コメントは復元されますか？
ファイル内に残っているコメントだけを保持します。ほとんどの圧縮ツールは法的な表記を除いてコメントを削除するため、削除済みのものは復元できません。フォーマッターは残っているコメントを適切に配置します。
SCSSやLessにも使えますか？
このページは、ブラウザーが実際にダウンロードする標準CSSを対象としています。SCSSやLess独自の変数、ミックスイン、入れ子構文を含むプリプロセッサーのソースは想定していません。ただし、標準CSSの入れ子構文には対応しています。