Jamz

上ノ郷谷氏のスタイルシートを書く時のガイドライン - 2xupというエントリーにコメントしたのですが連休中に時間が取れず...

有言不実行は最低... なので、追加コメントと今後のためのメモを残しておきます。

利用者インターフェイス (User Interface)
ビジュアルフォーマットモデル (Visual Formatting model)
ビジュアルエフェクト (Visual effects)
:

というような書き方がされており、こういう正式名称があったことを知ったわけですが、念のため関連ページをメモ。

• Cascading Style Sheets, Level 2
• Cascading Style Sheets, Level 2 (日本語訳)

CSS のガイドラインに関しては以前から情報収集していて、こうした資料を公開していただけるのは非常にありがたい。と同時に「コレ」といったガイドラインが存在していないのだなぁ、とつくづく感じます。

まずは、私のマークアップ・スタイルから。上ノ郷谷氏のガイドラインに倣えば、以下のようになります。

セットフォーマットルール

.select {
  property: value;
  property: value;
  property: value;
  }

最後の } に関しては、インデントしている方が自然な気がします。利用するエディタにもよりますが、通常は自動的にインデントされるでしょうから、いちいち頭の空白を削除するのは些細なことながら面倒かと。

定義の順番は以下の通り記述しています。

1. ビジュアルフォーマットモデル (Visual Formatting model)
2. ビジュアルエフェクト (Visual effects)
3. ボックスモデル (Box model)
4. 表 (Tables)
5. バックグラウンド (Backgrounds)
6. カラー (Colors)
7. フォント (Fonts)
8. テキスト (Text)
9. 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists)
10. 利用者インターフェイス (User Interface)
11. 聴覚スタイルシート (Aural style sheets)

まずは見え方 (ビジュアル*, ボックスモデル) から入り、ボックスの装飾関係 (表の見え方、背景) を定義して、フォント、その他、というような順序になります。

デザインが手元にあり、それを元にマークアップしていくという業務上の経験から今の形に自然と落ち着いていったことを考えると、この順序で定義していくのが私にとっては一番やりやすかったのでしょう。

その他に、HTMLタグの初期定義をする、レイアウト要素 (ワイヤーフレーム) 、レイアウトのブロック要素ごとに定義を分けるなど、いくつかの追加ガイドラインがありますが、そのあたりについては後々形式化していこうを思います。

CSSファイルの分割は以下のような感じです。

@import url("tag.css");
@import url("common.css");
 
@import url("layout.css");
@import url("header.css");
@import url("mainbody-top.css");
@import url("mainbody.css");
@import url("leftbar.css");
@import url("rightbar.css");
@import url("footer.css");

一年半くらいはこの形を維持しています。

後は印刷時の定義でしょうか。隠すもの、変更するものという感じで、こちらはレイアウトのブロックに関係なく (定義する量が比較的少ないため) どちらかに振り分け、定義を上書きする形で実現しています。

@import url("hidden.css");
@import url("change.css");

このあたりになると、サイトを構築する際の要件を考慮する必要があり、一概にガイドライン化というわけにはいきませんが。

取り敢えずは、こんなところでしょうか。

追記

追記 2006年07月27日

上ノ郷谷氏のエントリーに反応したエントリーをクリップしていこうと思います。

[16] CSS コーディングガイドライン

投稿者の方のガイドライン?が掲載されいている。色の指定や、画像などの url の指定についても記載されているのが良いですね。私とほぼ同じスタイル。

追記 2006年09月25日

このエントリーを公開して数ヶ月経っていますが、一部でまた取り上げられている話題のようなのでそれらをメモ。

どうやら発端は hxxk.jp というサイトのようで、CSS ガイドラインについて色々まとめられているようです。

• hxxk.jp - CSS の記述ルール記事のまとめ
• hail2u.net - Weblog - CSSコーディング・スタイル

追記 2007年05月21日

CSSの記述順とグループ化 | Tech de Go