CSS 書いてフローしよう

Web ディレクターだなんつって、ディレクターっぽい仕事はすっかり若い衆にまかせて、自分は HTML+CSS+Javascript ばっか書いてます。特に今年はそういうめぐりあわせのようで、いろいろ抵抗も試みたんですが、これといって成果はあがらず、しばらくはおとなしく運命に甘んじて過ごすことにしました。

なんで、ちょっと CSS まわりで地味な話を。

会社のHTML+CSS のコーディング規約を考えてくれた人の提案で、CSS で背景画像を指定する部分は、他の定義と分けて、専用のファイルに記述するっていうのがあって、最初はなんでそんなことしなくちゃいけないんだろうと違和感があったんですが、素直に従ってやってみると、なるほどそれはいいアイディアだったんだねって、最近は思うんです。

というのも、HTML+CSSをコーディングしてて、いわゆるフロー状態っていうんですか、のってるかんじでスイスイいくのを阻害するのって、背景画像関連の定義なんですよ。少なくともぼくの場合は。

具体的にいうと、画像を探す、サイズを調べる、ファイル名をタイプする、この３つの仕事が、テキストエディタとブラウザの往復から遠くかけ離れてるんですよね。頭や心のありかたも、ここでスイッチしちゃう。かんじとしては、その３つはあきらかに割り込みなんです。

Javascript 書いてるときは、それがなくて、けっこうすぐフローに入れます。だから、正直にいうと、Javascript　書いてるときが一番たのしいです。ディレクターなんて、いってみりゃ全部割り込みですからね。一日中打ち合わせでしゃべりすぎて熱にうかされたようになってるときは、フローかもしれませんけど。

まあ、とにかく、だから、そういう割り込みな部分をまとめて、それだけに集中していっきにやっちゃう時間をつくろう、そういう意図があったんじゃないかと。いいだしっぺは、そこんところをちゃんと説明してくれないまま辞めちゃいました。こっちもそこまで頭がまわらず、いるうちにちゃんと聞けなかった。で、今になって、じゃないか、なんていってるわけですけど。

ただ、せっかくそういうふうにしてみても、やっぱり、ページごと、ページを構成するエリアごとに、順番にスタイルを定義していくなかで、割り込んでくるんですよね。なかなか、背景画像の定義だけまとめてっていうのは、難しいです、実際には。

それでちょっと、地味に思ったんですけど、現状、すでにガイドラインにしたがって、CSS ファイルは、カスケーディングなりのディレクトリ構造の中に配置されてて、CSS で使う背景画像も、規則にのっとったディレクトリにまとめられているんです。

そしたら、それをあてにして、Perl + ImageMagik とかでスクリプトをまわして、画像ファイルを総なめにして、ありえそうな背景画像の指定を自動で書き出しとけばいいんじゃないか。

たとえば img/hoge.png という画像があるとすると、img/bgimg.css に次のような定義が自動で書き出されるんです。

hoge-fix {
/* ボタンとか */
display: block;
width: 100px;
height: 100px;
background-image: url("hoge.png");
background-repeat: no-repeat;
}

hoge-lt-nr {
/* 左上隅に見せたいアイキャッチとか */
background-image: url("hoge.png");
background-repeat: no-repeat;
background-position: left top;
}

hoge-rt-nr {
/* 右上隅に見せたいアイキャッチとか */
background-image: url("hoge.png");
background-repeat: no-repeat;
background-position: right top;
}

hoge-rx {
/* 横に繰り返すパターン */
background-image: url("hoge.png");
background-repeat: repeat-x;
}

hoge-ry {
/* 縦に繰り返すパターン */
background-image: url("hoge.png");
background-repeat: repeat-y;
}

hoge-r {
/* タイル */
background-image: url("hoge.png");
}

で、ここに定義されたクラス名を適宜エレメントに指定するもよし、それだと、特定のスタイルに密結合しすぎというなら、コピーして、文書構造やセマンティックに忠実なセレクタの定義にもっていくもよし。

これで、さっきあげた割り込み的な３つの仕事のうち、2、3、は軽くなるでしょう。画像は探さなきゃいけないけど、テキストエディタとブラウザの往復の外に作業がはみ出すことは、だいぶ減るんじゃないかな。

どうでしょうね。今やってるコーディングにケリがついたら、ちょっとやってみようと思います。

-----------------
sent from W-ZERO3