【レポート】

使われていないCSSを探す方法

Webページの制作に携わったことがあるならCSSも扱ったことがあるだろう。当初は小さかったCSSファイルも、デザインの変更や調整を続けるうちに、どんどん大きくなっていき、簡単には全体を見渡すことができなくなる。既存のデザインが崩れたりパラメータ間の調整を取るため、既存のCSSには手を加えずに新しいスタイルを追加していくことになるため、ファイルはどんどん大きくなっていく。

こうした状況はCSSファイルのメンテナンスという観点からはあまり好ましいものとはいえない。編集を繰り返していくうちに、すでに使われなくなっているスタイルもあるだろう。そうしたスタイルはできれば削除した方が、ファイルの中身の見通しがよくなる。そんな場合に活用できるツールがThe David Walsh Blogの記事「uncss: Find Unused CSS」において紹介された。

紹介されているツールは「uncss」というツール。指定したURLからHTMLをダウンロードしてきてJavaScriptを実行、使われているスタイルシートを展開したのち、スタイルをまとめてパース、さらに実際にHTMLで一致することないセレクタを見つけ出して使われていないスタイルを除くという処理をしていると説明がある。サイト全体に渡って適用するには追加でスクリプトを組む必要があるが、使われていないCSSを除去する基本的なツールとして活用を検討できる。

関連キーワード


人気記事

一覧

イチオシ記事

新着記事