べつになんでもないこと

以前、ブログのCSSを壊してしまって、ちょっと古いバックアップから元に戻そうとしたのだけど、（ちょっと古かったせいで）どこがいじってあるか分からなくなったので、標準のCSSと差分を取って末尾に追加する形にしました。

（追記）　いきなり標準だの差分だの言っても分からんよね（笑）。
標準（アサブロのテーマを選ぶとセットされるもの）

#container {
    margin-left: auto;
    padding: 0px;
    width: 806px;
    background-color: #B18E78;
    background-image: url(http://s.asablo.jp/css/common2r/pengin-white/bg2r.gif);
    margin-right: auto;
}

末尾に追加した差分（自分でカスタマイズした部分）

#container {
    width: 906px;
    background-image: url(http://puppet.asablo.jp/blog/img/2008/10/31/7ec99.png);
}

最初は大した量ではなかったので気にしなかったのですが、気が付けば520行が830行に膨らんでいました。
流石にこれは太りすぎ……でも差分は分かりやすいので残しておきたい。

と言う訳で、現在のCSSをバックアップして、追加・修正はバックアップファイルでやって、ブログはClean CSSで最適化したのをアップする事にしてみました。

余談ですが、最初は日本語のCSS最適化サイトでやってみたのですけど、AAがズレたりして上手くいかなかったもので……オプションを上手くいじれば良かったのかもしれませんが、それを覚えておいて次回も間違えず使う自信がなかったので、何もいじらずに上手くいった海外のサイトを使う事にしました。

バックアップのCSSを全選択してコピーしたら、「CSS-Code:」へ貼り付けて「Process CSS」のボタンを押すだけで、最適化されたCSSが生成されます。
後はそれをコピーしてブログのCSSを[CTRL+A]で全選択した状態で貼り付け、保存するだけでとても簡単です。

（追記）　Clean CSSで最適化（オプション変更なし）したもの

#container {
margin-left:auto;
background-color:#B18E78;
margin-right:auto;
width:906px;
background-image:url(http://puppet.asablo.jp/blog/img/2008/10/31/7ec99.png);
padding:0;
}

結局16,225バイトが11,375バイトになりました。

なんか微妙ですが最適化のレベルを上げて、管理画面で見たら訳が分からないというのもなんですし、極端に減る訳でもないので程々で満足することに。
多分非力なPCとかだと、少し（カスタマイズ内容を基本CSSに上書きする作業がなくなる分）楽になるんじゃないかと思います。

まあ、こんな変なCSSの使い方する人なんていないでしょうから参考にもならないでしょうけど、複雑なCSSを使ってる方は試してみるのもいいかもしれません。