CSSプロパティの記述順序ルール：Ultimate Interface：So-netブログ

	ブログをはじめるログイン

[book]　Webディレクション教科書｜[book]　嶋浩一郎のアイデアのつくり.. ブログトップ

CSSプロパティの記述順序ルール

現在、コーディングガイドラインを作成しており、その一環でCSSプロパティの記述順序をまとめました。
W3Cの「CSS2 Specification」を元にプロパティ群を分類化し、基本、要素の外から中へと並べています。
また、使用頻度の低いプロパティや音声、印刷、先行実装CSSは除外しました。

プロパティ分類

視覚整形モデル (No.1 - No.12)
ボックスモデル (No.13 - No.36)
リスト (No.37 - No.40)
テーブル (No.41 - No.45)
背景 (No.46 - No.51)
テキスト・フォント (No.52 - No.66)
ユーザーインターフェース (No.67)

プロパティ記述順序

float
clear
display
position
top
right
bottom
left
z-index
overflow
clip
visibility
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-right
border-bottom
border-left
border-width
border-color
border-style
width
min-width
max-width
height
min-height
max-height
list-style
list-style-type
list-style-image
list-style-position
caption-side
table-layout
border-collapse
border-spacing
empty-cells
background
background-color
background-image
background-repeat
background-attachment
background-position
line-height
text-align
vertical-align
text-indent
text-decoration
text-transform
white-space
letter-spacing
word-spacing
font-family
font-size
font-weight
font-style
font-variant
color
cursor

とりあえず社内へはこの並び順を啓蒙していくつもりですが、必須というわけではないので
あまり守られなさそうな予感。　チートシートも必要だろうなあ。

合同会社レゾリューションズさんから「CSSプロパティーフォーマット」なるDreamweaver拡張が無料配布されおり、ワンクリックで一気に整形できるスグレものなのですが、整形すると何故かセレクタごとに１行分改行が入る・・・。
整形後一行ずつ改行を消すのも現実的じゃないしなあ。惜しいです。