miyakeです。突然ですが、CSSって書くの面倒ですよね。何らかのプログラミング言語を知っている人間から見ると、CSSというのは言語としてはかなり貧弱です。

もちろんCSSはプログラミング言語では無いので、それを貧弱だと言われてもCSSもいい迷惑かも知れません。でも、

div#content { ～ }
div#content div.entry { ～ }
div#content div.entry p { ～ }
div#content div.entry ul { ～ }

こういう大したことをしていないのに、コードがどんどん長くなっていくのを見ると、もう少し何とかならないものかと思ってしまいます。

コピペするにしても、

1. コピー元にカーソルを移動
2. 範囲選択してコピー
3. コピー先にカーソルを移動
4. ペースト

という操作が必要になります。数が増えてくるとコピペのミスも発生しかねませんし、idやclass名が変わった時の対応も面倒です。まとめて置換して、想定外の部分が書き換わってしまわないとも限りません。

それに、変数も使えないので同じテキストを何度も何度も書く（コピペする）ことになります。プロパティの定義ならまだしも、画像のパスやカラーコードは変数に書けたらなぁと思ったことのある人も少なくないのではないでしょうか。

そもそもCSSの利点として「再利用性が高く、メンテナンスコストを抑えられる」というのがあるはずです。確かに外部CSSファイルにすることで、CSS以前に比べれば随分と効率化されました。しかし、CSSそのものの記述の効率化については今まで目を向けられて来なかった分野ではないかと思います。

サーバサイドCSS

CSSはブラウザが解釈するものなので、最終的にブラウザが読み込むCSSの仕様と挙動そのものを変えることは出来ません。そこで、CSSをサーバサイドで出力するというアプローチを採ります。こういった「サーバサイドCSS」といったようなアプローチはアイデアとしてはありがちだと思うのですが、あまり世の中にはないようです。

div#content { ～
    div.entry { ～
        p { ～ }
        ul { ～ }
    }
}

こんな感じで書けたらいいと思いませんか？

という訳で、手前味噌で恐縮ですが個人で公開している物のご紹介です。

• Smart*CSS

Smart*CSSは、mod_rewrite+php+Smartyで動作するCSSのプリプロセッサです。技術的にはこれといって見所の無いものですが、自分ではなかなか便利に使えています。

今のところ、出来ることと言えば、

• CSSの構造化（入れ子による記述）
• 変数の使用

ぐらいで、まだまだなのですが、他にも

• ブラウザを判定して、最適化したCSSを出力（自動CSS Hack）
• ブラウザ毎のCSSをキャッシュ or 静的ファイル書き出しに対応
• ありがちなパターン（Image Replacementなど）をモジュール化

といったところを実装して行けたらいいなと考えています。

普及していないのは何故？

個人的にはこういうツールはもっと普及していていいんじゃないかと思うのですが、現実はそうはいかないようです。

あくまで推測でしかないのですが、世の中のCSSを書く人は

• Cドライブに保存して動かない物はいらない
• Dreamweaverでそういう書き方出来ないし
• 憶えるの面倒だからコピペするよ

みたいな感じなのかも知れません（Dreamweaverでどうなのかはよく知りませんが…）。とは言え、Ajaxの登場などもあり、エンジニアがHTMLやCSSを書くことも増えてきていると思われる昨今、サーバサイドでCSSを拡張するというのはもう少し日の目を浴びていいように思います。エンジニアたる者、生産性の低いキータイプは極力避けたいところです。もっと楽をするためのツールが出て来て欲しいと思いませんか？

まだまだ自分自身煮詰められていませんが、「サーバサイドCSS」というアプローチに可能性を感じて頂ければ幸いです。

最後に

という感じでこの記事を書いてから、ふと「サーバサイド css」でGoogle検索すると、こんな記事を見付けました。

• サーバサイド処理を活用してCSSを書きやすく | Oddwit

こちらでCSS Server-side Pre-processorというツールが紹介されていました。今し方見付けたばかりで、中は見ていないのですが、どうやら自分が作った物と同様のコンセプトで作られているようです。あまり知られてはいないようですが、海外にはあるんですね…　まぁ、自分もせっかく作ったから、もう少し育ててみますか…