- 2009 年 3 月 3 日 23:30
- Web
ひょんなことから始まったらしいCSSのプロパティの記述順エントリーに便乗して今までつくろう思いながらなかなか実行できていなかったCSSガイドラインを作っていこうと思います。現状、一人で作業をすることしかないので必要ないと言えば必要ないのですが、今後自分が後輩を持ったときや自分が作った文書を他人が編集することになったときにできるだけわかりやすい作り方をしたいと思うのでやります。
まず、自分が過去に制作したCSSから自分の書き方の傾向を理解する
最初は基本的にアルファベット順（例外あり）で書いていましたが、正直に言いまして最近結構適当になっています。
今の会社に入社してもうすぐ半年なのですが、コーディング案件は4つほど、実質の作業期間は1ヶ月にも満たないです。（ちょっと転職失敗したかなとも思っています…個人でコーディング案件を受けたいくらいです。）
その4つの案件で制作したCSSを引っ張り出して見比べると、やはり無意識にもアルファベット順に合わせているときもあればぐっちゃぐちゃな順番のときもあります。
4つを統合してみるとこんな感じでした。
- position
- display
- float
- clear
- width
- height
- backgroud
- border
- list-style
- line-height
- margin
- padding
- font
- color
- text-decoration
- text-align
- text-indent
- overflow
- vertical-align
という具合でした。
セレクターによっては全然順番が違うことものもあり、本当に滅茶苦茶でした。
自分では決められず、制作していくうちに自分の考えもブレていき酷いものでした。
そういうわけで今回はブログで順番を晒して下さった先人や本を参考にして自分ルールを決めちゃおうというわけです。
先人たちとの比較
まずはCSS HappyLifeさんのケース
- display
- position
- float
- clear
- vertical-align
- width
- height
- margin
- padding
- background
- border
- list-style
- color
- font
- text-decoration
- text-align
- white-space
- other text
- content
Redline Magazineさんのケース
- clear
- float
- position
- display
- width
- height
- background
- color
- font
- text-align
- text-decoration
- other text
- list-style
- vertical-align
- white-space
- content
- border
- padding
- margin
hamashun.comさんのケース
- clear
- float
- position
- display
- width
- height
- min-height
- margin
- padding
- border
- あとは概ねアルファベット順
僕も含めて全員結構違います。
やはりCSSのプロパティ順は十人十色で自分の経験上の並びになる場合が多いのでしょうね。
色々見てて一番いいなと思ったのは2xup.orgさんの順番です。
サイトだけ見てもピンときませんでしたが、Web Standers Designの紹介記事を合わせて読むとこれが一番いいのではないかと思えました。
2xup.orgさんのケース
- 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists)
- 利用者インターフェイス (User Interface)
- ビジュアルフォーマットモデル (Visual Formatting model)
- ビジュアルエフェクト (Visual effects)
- ボックスモデル (Box model)
- 表 (Tables)
- カラー (Colors)
- フォント (Fonts)
- テキスト (Text)
- バックグラウンド (Backgrounds)
- 聴覚スタイルシート (Aural style sheets)
プロパティで書き直すとこんな感じ
- content, quote, list-style
- display, position, float, clear, width, height, line-height, vertical-align
- overflow, visibility
- margin, padding, border
- border-collaps
- color
- font
- text-indent, text-align, text-decoration
- background
主に自分がよく使うものだけ記載しましたが、このようになります。（カリスマアフィリエイターのすすめで買ったブックスタンドがここでも役に立ちました）
これは絶妙な書き方だと思いました。グルーピングで把握しやすく、出現順も自然というかわかりやすいというか…明日からこの法則でCSSを記述すすると考えるとワクワクすらしてきました。
引用させていただいた方々のブログはRSS購読しています。今回の流れもRSSを購読していたので知りました。勉強し、時には真似させていただいて（Redline MagazineさんのPHP記事はかなり参考にさせていただきました）自分も早くこの方々のレベルに達したいです。いや、マークアップしか出来ないので追い越さないとこの世界で生きていくのは難しいかもしれません。
ちょっと憧れたので自分も流れに割って入ってみました。