読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

csscssを使ってみた

ちなみにこちらcsscss

csscssとは

CSSファイルで、プロパティが重複しているセレクタを教えてくれるアプリケーションです。

使い方は、Rubyをインストールして

gem install csscss

現在のブログのCSSを対象に使ってみた

ら以下のような結果がでました。

{.hatena-module:not([class$="-category"]):not([class$="-recent-entries"]) a} AND {a.leave-comment-title} share 5 rules
{.pager a}, {body[class^="page-a"] h1>a} AND {div.entry-content a:not([class="keyword"])} share 5 rules
{.date} AND {body:not([class^="page-a"]) .categories} share 4 rules
{.hatena-module:not([class$="-category"]):not([class$="-recent-entries"]) a}, {.header_link,#blog-title a,div.hatenamodule.hatena-module-recent-entries a,div.hatena-module.hatena-module-category a}, {.pager a}, {a.leave-comment-title}, {body[class^="page-a"] a}, {body[class^="page-a"] h1>a} AND {div.entry-content a:not([class="keyword"])} share 4 rules
{.entry-content .hatena-asin-detail>a,blockquote>a} AND {.hatena-module.hatena-module-profile .hatena-module-body>a} share 4 rules
{#content-inner} AND {.breadcrumb} share 3 rules
{a.leave-comment-title} AND {div.hatena-module.hatena-module-category} share 3 rules
{#footer-inner address} AND {#footer-inner p} share 3 rules

share [数字] rulesと出て、これらのセレクタ間でこれだけ重複している箇所があるということが分かりました。
これを参考にしてCSSファイルから重複部分をまとめていきました。

結果

CSSファイルの無駄が減ってサイズも、850KBから806KBまで減りました!

まとめるときは、Sassの@extendを使うとコードも見やすく楽だと思います。