CSS フォーマッター

Q: プロパティは並べ替えられますか？

いいえ、宣言は元の順序のままです。

Q: コメントは保持されますか？

はい、コメントは保持されます。

Prettier で CSS を整形：宣言は 1 行に 1 つ、スペースを統一し、スペース 2 つ・4 つ・タブを選べ、メディアクエリもきれいにネスト。処理はブラウザ内で完結します。

インデント

CSS の入力

出力

すべてブラウザ内で実行されます。データがアップロードされることはありません。

CSS フォーマッターとは？

CSS フォーマッターは、圧縮された、または不統一なスタイルシートを、Prettier を使って読みやすい CSS にします。各ルールと宣言は独自の行になり、コロンやセレクターの周りのスペースが正規化され、入れ子になった at ルールはインデントされます。

CSS フォーマッターの使い方

CSS を入力欄に貼り付けるか、サンプルを読み込む をクリックします。
インデント を選びます。
整形をクリックします（入力中も出力は更新されます）。
整形された CSS をコピーまたはダウンロードします。

例

入力

a{color:red;margin:0 auto}

出力

a {
  color: red;
  margin: 0 auto;
}

CSS フォーマッターを使うべき場面

Web サイトの圧縮された CSS を読んだり、レビューの前に手書きのスタイルシートを正規化したり、ドキュメント用に CSS スニペットを整形したりするときに使います。プロパティ名や値のチェックは行いません。それには CSS バリデーターを使ってください。SCSS や Less には、コードビューティファイアーでその言語を選んでください。

CSS フォーマッターの仕組み

スタイルシートは Prettier の PostCSS ベースのパーサーで解析され、Prettier の CSS ルールで出力されます。各コロンの後にスペースが入り、各宣言はセミコロンで終わり、リスト内のセレクターは別々の行になります。閉じられていないブロックなどの構文エラーは、行と列付きで報告されます。