CSSのガイドライン

参照元 ： taichi kaminogoya様

最近、自分以外の人のCSSをじっくり見る機会があって、
その時に思ったのは
「HTMLの書き方は、多少の差異はあれどあまり個人差はないが、
CSSは、書き方やファイルの作り方に個人差があるのではないか？」
ということです。

今まで、他の人の書いたCSSを研究してこなかったわけではありませんが、
顔が見える人（つまり知人）のCSSを見て比較する機会がほとんどなかったので、
CSSの書き方もその人の性格を表すんだろうか？なんていうことも思っています。

さて、本題ですが、
他人のことが気になると、自分のことも気になるわけで、
私はCSSを書く際にどうやってファイルを分けているのか？
セレクタはどういう書式で書いているのか？プロパティはどうなんだろう？
が気になり、

以下で現在の自分の作り方をまとめてみました。

１．CSSファイルの作り方

CSSファイルはすべて、styleフォルダに格納。
import.cssに@importを書き、基礎となるCSSを読み込む。
基礎CSSのファイル名はほとんどbase.css。
baseには、ページ全般のデザインに加えてトップページ専用のデザインも書く。

コンテンツページに関しては、base.cssを上書きにする形で新しいCSSを読み込ませる。
よって、基本的には階層が深くなるほど、読み込むCSSが増えていくことになる。

２．セレクタの順序

はじめに、html、body、pなど、ID・クラスのないものに対して全般的な指定をする（パディングとかマージンとか）
それ以降は、HTMLに現れてくるID・クラスの順番にセレクタを置く。
なので、#headerに関する指定、 #mainの指定、 #footerの指定、の順番で出現する。

３．プロパティの順序

大枠を決めるプロパティから先に記述する。
displayがあった場合は、displayが最上部。
次にwidth、height、
次にmargin、padding
次にテキストに関する指定（text-indent、line-height、font-family、font-weight など）
次に色や背景に関する指定(color、background、border)
次に、floatの指定
次に、position関連の指定
その他はこの後ろに。
 

４．書き方の基本

.クラス名（#ID名）の後ろに半角スペースを入れて｛
プロパティは1回インデントをしてから書く。
｝インデントを消して終了。
 

.class {
    propaty: date;
}

いま、私の思いつく範囲ではこんな感じになるでしょうか。
知識が浅すぎて使うプロパティが少ないので、わりと簡素になってます。
今後、もうすこし分析してみたいと思います。

---

8月7日追記

５．ID、クラス名

よく利用するID名を挙げると、

• #container　　body直下に置くコンテナボックス
• #contents　　　#containerの下、または#containerと同義
• #navi　　　　　　ナビゲーション用
• #main　　　　　メインコンテンツ用
• #sub　　　　　　サブメニュー・サブコンテンツ用
• #left　　　　　　3カラムレイアウトのときの左
• #right　　　　　3カラムレイアウトのときの右
• #header　　　タイトルなどを入れるヘッダ用
• #footer　　　　コピーライトなどを入れるフッタ用

クラス名だと

• .clearfix　　　clearfix用
• .section　　　コンテンツを小分けにするときに使う

くらいでしょうか…。
いつも使うものだけ挙げたにしても、意外に少ないものですね。