CSSコーディングで徹底すべきこと

下の子のコーディングを見ていてあまりにガッチガチにCSSを組むので、修正のついでに脳内に列挙したガイドラインを書き出してみます。

フォントサイズ固定すな！

すごい初歩。
フォントサイズのpx固定は初心者で結構ありがち、というかやっても良い箇所もあるっちゃあるんですが、良くない場所もあるわけでして。YUIのデフォルトCSSでブラウザ依存をリセットしてるんだからキッチリ%かemで指定しちゃってね！

クラスは少なく汁！

クラスの量がとにかく多い。
通常の表として扱うTableにクラス付けないと枠組みがなされないカオス。いや、それはそれでいいんだ。必要とあらばテーブルレイアウトもするしね。ただ「テーブルレイアウトを絶対しない箇所」ってのはあるワケで、大枠のブロック単位でスタイル分岐をさせるのが柔軟性に繋がります。
だけれど「増えていいクラス」ってのもまたあったりするのです。そこら辺は匙加減。

Tableにスタイル付けすぎない！

上記のクラス大杉問題に続くのだけれど、枠線の付くテーブルクラスにフォントサイズやセンタリングまでtdにガッツリ定義されているので、それを解除するためにまたクラスをガッツリ定義する必要があるという悪循環。
汎用表に使用するtdに対してtext-alignは使っちゃダメだよ！borderとbackground程度でアッサリめに定義して、text-alignは適宜宣言する方がいいよ！あとセルの横幅はpx指定よりem指定の方がいいよ！

bodyにid、class付けて活用しようぜ！

bodyがただのデクの棒になりがち。
bodyのidやclassに、カテゴリー・エントリーといった「ページタイプ」や、現在開いているページの属する「カテゴリー名」などを埋め込むことで、同一のスタイル構造を保ったまま一気にスタイル内容を切り替えることが出来ます。それによって一気に入れ子やクラスの軽減もできたりする。

柔軟性・汎用性を持たせるコツは「いい加減」に

とりあえずCSSで柔軟性を出すコツは、一つ一つの定義の内容は「とにかくアッサリ」と「良い加減」に設定するのが一番だと思っています。
あんま濃くするとそれを解除するためのスタイルが必要だったり、尚且つ!importantダクになる恐れもあるのでサイテー。
「HTMLは文書構造、CSSは文書装飾として切り分ける」という耳タコな大前提がありますが、さらに言うとCSS内でも大枠構造と要所装飾といった切り分けが必要です。部屋を壁紙一枚で一気に装飾するんじゃなくて、無地の壁に付け外しが楽なシールでペタペタ装飾するイメージ。
あらかじめ意識していればそんなに手間でもありません。
上述の通り「増えちゃダメ・増えてもいい」といった曖昧なモノも結構あるわけでして、そこら辺は個人の経験と意識によるものが大きいのだけれど、このノウハウをいかに伝えられるかってのは、俺の力量なんだなー。

あ〜…しない方がいい定義がたくさんだよコレ…