ベテランのウェブデザイナーなら、CSSファイルはきちっと整理されていることでしょう。
セレクタは適切に配置され、プロパティも完璧…。
ですがそんな人でも、新規のWebプロジェクトを手掛けたときに、はじめは必要最低限のものしかなかったCSSが、次第に膨れ上がり、気づけばしっちゃかめっちゃかに……なんていう経験があるのではないでしょうか。
そんな状態では、全体の構造が極端に見えにくくなって、そうでなければありえないようなミスが増えても仕方がないでしょう。
このようなケースに対してすぐに思い付かれる解決策は2つ、逐一CSSを見直して再構築するか、サイトができてから最後に手直しをするかですが、いずれにせよ時間がかかります。
そんなときに便利なのが、以下に紹介する、CSSを整理してくれるツールです。
CSS Comb：CSSプロパティを適切な順番に整理する
（※画像をクリックするとリンク先に飛びますのでご注意ください。）
このツールはスタイルシートの段階からCSSプロパティを整理して、設定した順に並べてくれます。
Csscss：CSSリダンダンシー分析
このツールはCSSファイルを構文分析して、どのルールセットの宣言が重複しているかを教えてくれます。使い方の詳細はこちらをご覧ください。
Helium CSS：サイトをスキャンして不必要な部分を教えてくれるJSツール
このツールはウェブサイトの複数のページを調べて使われていないCSSを教えてくれます。サイトの複数個所のURLをリスト化し、それぞれのページをロード・オペラント分析してスタイルシートのリストを作成します。その後URLリストのページへとび、スタイルシートのセレクタが使われているかを調べます。
CSSO：CSSファイルの構造最適化
このツールはCSSファイルの構造最適化をすることで、他のミニマイザと比べてファイルのサイズをずっと小さくしてくれます。セレクタやプロパティとブロックを統合したり、重複したセレクタやオーバーライドのプロパティ、空のルールセットを取り除いたりくれます。
CSS Beautifier：CSSを自動で読みやすく
CSSファイルを自動で清書して読みやすくしてくれるツールです。下の画像のようなCSSが…
こうなります。
CSS Lint：CSSコードの問題点を指摘
このツールは非効率だったり問題のあったりするパターンのCSSコードを指摘してくれます。ルールは挿し込めるので、自分で書いたりいらないものを編集したりできます。
Devilo.us：CSSを整理して圧縮
CSSTidyを基にしたこのツールは、CSSを圧縮して最適化してくれます。CSS3にも対応していますよ。
いかがでしたか。ぜひここで紹介したツールをうまく組み合わせて利用し、作業の効率をあげてくださいね。
（※本記事は、Tools to Format, Organize and Tidy Your CSS Codeを翻訳・再構成したものです）
おすすめ新着記事
おすすめタグ