Make Tech Easier - Uncomplicating the complicated, making life easier

WebサイトやWebページ、WebアプリケーションにとってCSSはデザインを実現する中核技術となっている。このCSSを最適化する3つのツールが3 Useful Tools To Optimize your Blog’s CSS - Make Tech Easierにおいて紹介されている。紹介記事そのものはブログで利用されるCSSを取り出して最適化するストーリーになっているが、汎用的なテクニックとして利用できる。紹介されているテクニックとツールは次のとおり。

CSSファイル編集テクニック

1. CSSはHTML内部に記述するのではなく外部ファイルにまとめる
2. 属性に繰り返し同じ設定を記載するのではなく、クラスとして定義して利用するようにする。たとえば複数のクラスにfloat:left;を指定するのではなく、div.floatleft{float:left;}といったクラスを作成して利用する
3. ブラウザに特定のCSS指定は別のファイルに分離する。分離したCSSファイルは対象とするブラウザ向けの修正のみに特化する

1. CSSファイルをフォーマットする

Format CSS tool利用例 - 変換前	Format CSS tool利用例 - 変換後

CSSファイルの最適化を実施するにあたって、まずは正しいフォーマットで記述されているか確認するとともに、要素や属性が理解しやすいように記述されているか、重複しているクラスやIDはないかを確認する。Format CSS toolなどのWebアプリケーションを使って自動的にフォーマットを整えると便利。

2. 重複したコードを削除する

Online CSS optimizer利用例 - 変換前	Online CSS optimizer利用例 - 変換後

フォーマットを整えたら最適化作業に取りかかる。Online CSS optimizerなどで最適化が可能。このWebサービスでは処理速度を向上させるためにRGB指定を16進数表記へ変換したり、オプションを指定して不要な空白の削除、ボーダー数値をモダンスタイルへ変更、絶対表記から相対指定へ変換、複数の属性をひとつにまとめあげるといった処理が可能。

3. クリーンナップとサイズ縮小

Clean CSS利用例 - 変換後	CSS Drive利用例 - 変換後

最後にCSSファイルのクリーンナップとサイズ縮小を実施。クリーンナップとサイズ縮小にはClean CSS、CSS Tidy、CSS Driveなどのサービスやツールが利用できる。