CSS コーディングガイドライン（旧）

2008年1月12日追記

メモ。WEB 制作する場合はほぼ一人で組んでいるのでコーディング規約なんぞ知ったことなく好き勝手書いても良いのだがメンテナンスや可読性を考えるとやはりある程度は決まり事を作って書いた方が良い（他にもコーディング規約を作る理由は沢山あるけど）。

そんな訳で。今まで CSS の場合は下記サイトのチートシートを見てプロパティの順番やらを決めていたのだけど。
http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/

最近エントリされたこの記事。
スタイルシートを書く時のガイドライン
 http://jamz.jp/design/2006/07/css_guideline_memo.html

CSS の各セレクタにはちゃんとカテゴライズされた正式名称があったのね。調べてみるとちゃんと W3C で定義されている。ふむふむ。
Cascading Style Sheets, Level 2
Cascading Style Sheets, Level 2 日本語訳

そんな訳で上記を参考に自分なりのコーディングガイトラインが下記。インデントしないのは単に「サイズが小さくなるから」だけ。プログラムの場合は条件分岐などでで入れ子になるのでインデントする必要はあるけど CSS の場合だとプロパティは一行にひとつなので別段可読性が下がらないのならユーザに優しく無駄なものは取り除いた方が良いかなぁと個人的な意見。

【CSS コーディングガイドライン】

┌─────────────────────────
│フォーマット
└─────────────────────────
.selector {
property: value;
property: value;
property: value;
}

・セレクタ名の後は半角スペース1つで { を入力
・各プロパティはインデントしない
・プロパティ名の後 : スペース無し
・ : と値の前は半角スペースを1つ
・値の後 ; で終了を示し } は改行
・色指定は小文字16進数8ビット　例：#ff3300
・アドレスを指定する場合は url("http://example.com/")

┌─────────────────────────
│プロパティ順序
└─────────────────────────
 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

┌─────────────────────────
│ 1. ビジュアルフォーマットモデル
│    visual formatting model
└─────────────────────────
display
position
top
right
bottom
left
z-index
float
clear
direction
unicode-bidi
min-width
width
max-width
min-height
height
max-height
line-height
vertical-align

┌─────────────────────────
│ 2. ビジュアルエフェクト
│    Visual effects
└─────────────────────────
overflow
clip
visibility

┌─────────────────────────
│ 3. ボックスモデル
│    Box model
└─────────────────────────
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-color
border-style
border-top
border-right
border-bottom
border-left
border-top-width
border-right-width
border-bottom-width
border-left-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-top-style
border-right-style
border-bottom-style
border-left-style

┌─────────────────────────
│ 4. 表
│    Tables
└─────────────────────────
caption-side
table-layout
border-collapse
border-spacing
empty-cells
speak-header

┌─────────────────────────
│ 5. バックグラウンド
│    Background
└─────────────────────────
background
background-color
background-image
background-repeat
background-attachment
background-position

┌─────────────────────────
│ 6. カラー
│    Color
└─────────────────────────
color

┌─────────────────────────
│ 7. フォント
│    Fonts
└─────────────────────────
font
font-family
font-style
font-variant
font-weight
font-stretch
font-size
font-size-adjust

┌─────────────────────────
│ 8. テキスト
│    Text
└─────────────────────────
text-indent
text-align
text-decoration
text-shadow
letter-spacing
word-spacing
text-transform
white-space

┌─────────────────────────
│ 9. 生成 内容 自動番号付け及びリスト
│    Generated content, automatic numbering, and lists
└─────────────────────────
content
quotes
counter-reset
counter-increment
marker-offset
list-style
list-style-type
list-style-image
list-style-position

┌─────────────────────────
│10. 利用者インターフェイス
│    Generated content, automatic numbering, and lists
└─────────────────────────
cursor
outline
outline-width
outline-style
outline-color

┌─────────────────────────
│11.聴覚スタイルシート
│    Aural style sheets
└─────────────────────────
volume
speak
pause
pause-before
pause-after
cue
cue-before
cue-after
play-during
azimuth
elevation
speech-rate
voice-family
pitch
pitch-range
stress
richness
speak-punctuation
speak-numeral