CSSの整形 — スタイルシートのフォーマットとプリティプリント

CSSの整形の仕組み

CSSの整形は、圧縮または不適切にフォーマットされたスタイルシートに読みやすいフォーマットを復元します。CSSを解析し、一貫したインデント、1行に1宣言、セレクターと値の周りの適切なスペースで再出力します。

ビフォー・アフター

/* 圧縮された入力 */
.nav{display:flex;gap:8px}.nav a{color:#333;text-decoration:none}.nav a:hover{color:#0066cc;text-decoration:underline}

/* 整形後の出力 */
.nav {
  display: flex;
  gap: 8px;
}

.nav a {
  color: #333;
  text-decoration: none;
}

.nav a:hover {
  color: #0066cc;
  text-decoration: underline;
}

フォーマットオプション

ほとんどのCSS整形ツールは設定可能なオプションをサポートしています：

• インデントサイズ — 2スペース、4スペース、またはタブ
• ブレースの配置 — 開き括弧をセレクターと同じ行（最も一般的）または新しい行に
• セレクターのフォーマット — グループ内の各セレクターを独自の行に（.a,\n.b）またはすべて1行に
• 宣言の順序 — アルファベット順、タイプ別グループ化（位置、ボックスモデル、タイポグラフィ）、または変更なし
• 空行 — 読みやすさのためにルールブロック間に空行を挿入
• 引用符の正規化 — 文字列値のシングルまたはダブルクォートを統一

完全に復元できないもの

JavaScriptの整形と同様に、CSSのフォーマットは以下を回復できません：

• 除去されたコメント — ドキュメントは圧縮後に永久に失われます。
• 除去されたショートハンドの展開 — margin: 10pxが元々4つの個別のmargin-*宣言として書かれていた場合、整形ツールにはそれを知る方法がありません。
• 結合されたセレクター — 圧縮中に2つのルールが結合された場合、整形ツールはそれを結合されたまま保持します。

CSSの整形ツール

• Prettier — CSS、SCSS、Lessを処理する独自のフォーマッター。
• Stylelint と --fix — 自動フォーマットも可能なリンター。
• css-beautify（js-beautifyの一部） — スタンドアロンのCSSフォーマッター。
• VS Code内蔵フォーマッター — 基本的なCSSパーサーを使用したフォーマット。

デバッグ支援としての整形

レイアウトの問題を引き起こしている圧縮されたスタイルシートに遭遇した場合、まず整形すると問題のルールを特定するのが劇的に簡単になります。ステップスルーデバッグのために、整形されたバージョンをブラウザDevToolsのソースに追加してください。