Swirling Mist

Masayan さんの[css] 書き方いろいろを受けまして、私がよくやっている CSS の書き方を紹介してみます。

いつも、プロパティを複数行に分けて書いています。

[code lang="css" -0]
* {
border:none;
font:normal 400 100%/1.5 Verdana, Arial, Helvetica, Sans-Serif;
margin:0;
outline:0;
padding:0;
text-decoration:none;
}
[/code]

割とずぼらなので、一行に書いてしまうと同じ指定を何度も繰り返す、なんて間抜け極まりないことをしてしまうこともあるためです。

CSS の最適化には、 CSS Formatter and Optimiser を使用しています。これの素晴らしいところは見易く、且つ軽く最適化をしてくれるところ。右上の “Compression” で見やすさと重さのバランスを調節できます。

Masayan さんも仰っていましたが、サイトを作成していて毎回悩まされるのが IE 。バグが多いですし、独自拡張ばっかりですし、そのくせシェアはトップ。呪いたくなるブラウザです。

CSS の振り分けを使ってしまいたいところですが、その前に出来ることを探してみます。趣味のWebデザインさんの“いろは”の先のCSS　第1回、Lucky bag::blog さんの CSS を作成する際のお約束にある通り、ブラウザのデフォルトスタイルを殺し、その上でいちいち指定し直すとズレが割合少ないです。いちいち、といったところでたいした手間でもありませんし、デフォルトで違うものを無理に直そうとするよりは労力が少なくてすむのでお薦めです。

あとは少し古い記事ですがスタイルシートスタイルブックが翻訳した CSS“カンニングペーパー”を見ているとつっかかっていることが解決することもあります。

閲覧者の方が IE を使わないでくださるとどんなに楽になることか。 Opera や Firefox のより一層の普及を願ってやみません。

あと、書く順番は昔使っていた P_BLOG のコーディング規約の標準 TOC オーダーに沿っています。

どういうことかと言いますと、マニュアルにもありますが、

• BASE ELEMENTS
• HEADER BOX
• CONTENT BOX
• MENU BOX
• FOOTER BOX

と場所ごとに書いていき、

• TEXT DECORATIONS
• OTHER STUFF

と汎用性のあるものをまとめます。慣れもあると思いますが、使いやすいです。コメントを入れることで後で見ても分かりやすく。あ、 CSS Formatter and Optimiser を使って最適化をすると、(他の最適化ツールでもそうですが) コメントが削除されてしまうので ¹バックアップをとっておく必要があります。

プロパティの順番を変えると表示が変わってしまうこともあり、バックアップは必須です。

まとめにかえて

見直してみるとなかなか奥深い、と思いました。

ベストの書き方、というのは私も探している途中です。何か良いのがあったらご教授ください。

1. 設定により残しておくことも可能。[back]