CSSの使用していない部分を自動削除し綺麗にする方法

デザイン

今回は、CSSの使用していないセレクタやスタイリングを自動的に削除し、コードを綺麗にする方法についてまとめています。

Webサイトを作成してから何度もメンテナンスや更新を行なっている場合、CSSには記述されているものの、実際にはHTML側で使用されていないセレクタやスタイリングが多数生じてしまいます。

このように肥大化したCSSは、Webページの表示速度にも影響を与えるばかりか、メンテナンス性を損ないます。

今回はそのような問題を解消するいくつかの方法をまとめます。

１．Unused CSS　を使用してWebページをスキャンし、使用されていないセレクタを抽出する

このサイトを活用することにより、サーバーにアップされたWebサイト全体を自動的にスキャンし、CSS側で記入されているものの実際には使用されていないセレクタを抽出できます。

方法は簡単で、作成したHTMLとCSSをサーバーにアップし、そのURLを入力します。そして、そのURL入力欄の下にある「CHECK FOR UNUSED CSS」のボタンを押します。

そうすると、CSSファイルには書かれているものの、実際のHTML側では使用されていないセレクタの一覧が表示されます。

その後は、使用されていないセレクタをテキストエディタで消していくだけです。

このサイトは「テスト中」です。それでバグがある可能性があります。
URLを入力したときにスキャンされるのは、最初のページ、つまり「index.htm」のみです。　それで、特定のセレクタが最初のページでは使用されていないものの、他のページでは使用されているというような状況の時、このサイトは、それも「使用されていないCSS」として表示してしまいます。
「:hover」や「:focus」など、疑似クラスは「使用されていないCSS」リストに表示されることがあります。

ただ、このように使用していないセレクタを表示してくれるだけでは、その後の作業がとても大変です。それにindex.htmlしかスキャンしないというと使いづらく感じる方もおられると思います。　それで、おすすめなのが、以下のWebサイトです。

このサイトは、左側にHTMLファイルのコードを、右側にCSSのコードを直接コピペし、下の「UNCSS MY STYLES!」ボタンを押すだけで、CSSを綺麗に整えてくれます。

数秒で、使用していないCSSセレクタとスタイルを削除した綺麗なCSSファイルがその下に表示されます。

それをさらにコピペして、もとのファイルと差し替えるだけで、肥大化したCSSファイルをお掃除できます。

本当に使用していないCSSセレクタのみを削除できいているのか、保証はありませんので、使用前に必ずファイルのコピーを取っておき、このサービスを利用した後にスタイルが崩れていても元に戻せるようにしておくことをおすすめします。
特に、CSS側に記述のミスがある場合、要注意です。　わたしも何度かこのサイトを使用しましたが、CSSファイルの記述ミス、例えば「；」が抜けている、スタイル指定の際に無効なスタイリングをしているなどがある場合、どうもうまく動きませんでした。　ブラウザでの表示の場合、CSS側に多少の記述ミスがあっても問題なく動くことがありますので、このサービスを活用する際には、正しくCSSがコーディングされている必要があるようです。その点が心配な場合には、まずCSSチェッカーで、コーディングが正しいか確認の上使用することをおすすめします。

ここで取り上げた方法を用いてHTMLとCSSそれぞれを綺麗に整理することができますので、ぜひ活用してみてください。

なお、繰り返しになりますが、これらのWebサービスを活用した後には表示などが崩れていないか確認するようにしてください。

また、万が一スタイルが崩れてしまった場合にも対応できるように、必ずバックアップを取っておきましょう。