Elephant Communicationsの制作スタッフが日々気になったことをお届けするブログです。

« Adobe Podcast | メイン | ページビューの死。人気サイトの基準が変わる? »

水曜日, 7 04, 2007

他人の書いたCSSは読むのが大変って思ったことありますよね。

きちんとガイドラインが決められているCSSならまだしも、
複数のコーダーが関わったものや、修正が繰り返されたものなんて、
ルールもバラバラ、順番もあやふや。

そんなCSSの書き方を根本から変えるツール、
「CSS SERVER-SIDE PRE-PROCESSOR」です。


たとえば、こんなHTMLがあったとしましょう。
<ul class="test">
    <li class="one">One</li>
    <li class="two">Two</li>
    <li class="three">Three</li>
</ul>

これにスタイルを書くときは、こういう風に書きますよね
ul.test { list-style: none; }
ul.test li.one { font-size: 1em; }
ul.test li.two { font-size: 2em; }
ul.test li.three { font-size: 3em; }

それをこんな風に書いちゃうことができます。
ul.test
{
    list-style: none;
    li.one { font-size: 1em; }
    li.two { font-size: 2em; }
    li.three { font-size: 3em; }
}

つまり階層構造のままに記述することができるということ。
なぜこんなことができるようになるかというと、秘密はこのファイル。
http://www.shauninman.com/assets/downloads/sspp-v004.zip

難しいことはありません、上記ZIPファイルを解凍すると、
+ .htaccess
+ cache/
    + .htaccess
    + cacheer.php
+ cache.php

↑こんなファイルが現れますので、これらをサーバーにアップ。
さらにcacheフォルダのパーミッションを“777”に。

あとは自分で書いたCSSをアップするだけ。

こんな風に書いても・・・
ul.test
{
    list-style: none;
    li.one { font-size: 1em; }
}

こんな風に出力されます。
ul.test { list-style: none; } 
ul.test li.one { font-size: 1em; }

しかも改行や余計な空白などを削って出力してくれますので、
容量も軽くなります。

説明が長くなりましたが、
実際やってみるとどういうことかすぐに分かります。

必要な動作環境は、.htaccessが使えて、PHPが稼動するということくらいですから、
導入もしやすいのではないでしょうか。

http://www.shauninman.com

トラックバック

このエントリーのトラックバックURL:
http://lab.elephant-com.co.jp/cgi-bin/mt/mt-tb.cgi/24

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)