Greensleeves v2.0 / Archive / 2007-05 / 141537

Notes about things I'm interested in.

CSS の記述ルールを決めてみた

  • Tags: CSS, Tips
  • Date: 2007-05-14T06:37:17+09:00

2 Comments | Add a Comment

ウェブサイトのスタイルを編集しようと思った際、作ったばっかりの頃はいいけど、何ヶ月か後に編集しようとすると「あれ?これどうなってるんだっけ?」とか自分で作ったはずのスタイルなのに意図を見失う場合が稀にあります。それを防ぐために、今のうちにスタイル記述に関するルールを作っておこうと思いました。もちろん CSS を一から書き直すときや、複数人で CSS を編集するような場合でも使えるような配慮も忘れずに。

その際、他の人はどうしてるのか気になったので、色々調べていたら hxxk.jp - CSS の記述ルール記事のまとめのエントリーにドンピシャなまとめがあったので、いろいろ参考にして作ってみました。

guideline.css の作成

前述のまとめで取り上げられていた Code-404.css ファイルの先頭にルールを明確に記述しておく記述定義の方法が一番しっくりきたので、それをベースに guideline.css を作成。.css ということになってますが中身はコメントアウトした大まかな CSS 編集ガイドラインだけしか書いてありません。

guideline.css の中身

  1. CSS プロパティの記述順序について。CSS2 Specification の出現順序を参考に記述順序を作成。CSS2.1 の改訂でサポートされなくなるプロパティとページ/オーラルメディアについてのプロパティは割愛しています。
  2. CSS ハックの記述法について
  3. プロパティの Shorthand 記述について
  4. CSS の分割について

簡単にまとめると上のような感じになりました。詳細は guideline.css をご覧ください。

あとは分割された reset.csselement.csslayout.css についても頭に細かい記述ルールを書いて、import.css でまとめて、お終い。だけど、今はまだルールは決めたけど時間が足りないので記述はそれに従って書いていない。それは後ほどに。


View 2 Comments

レの人's Comment on May 16th, 2007 at 22:15:02

制作技術とは直接関係があるわけじゃないけれど、CSSやらXHTMLやらの記述ルールの固定、適切なコメントを残しておくのはメンテナンスや、複数人数で編集する時に有効ですな。私も昔に他人が書いたCSSを押し付けられて、コメントも何もなしでクラスやID名も適当で酷い目にあったことがあります。

|`) guideline.cssへのリンクが切れている予感。

Linear's Comment on May 17th, 2007 at 01:29:53

お久しぶりです。

備忘録的なものでもありますけれど、仰られるようにコーディングガイドラインの作成は特に複数人での作業に威力を発揮しますね。

4月からWEB業界の端っこに身をおいてまだ1ヶ月程度なんですが、その辺を意識するようになりました。しかし、まだ浅学なので、とりあえず自分のものを無理やりまとめてみた。という感じです。

あとリンク切れ直しておきました。ご指摘ありがとうございます。

Post a Comment

(Required)
Security Code (Required)

Recent Entries

Monthly Archive

Tags

Browser
CSS
Design
Javascript
Movable Type
Web
xyzzy