TOP > CSS >

CSS Nite in OSAKA　ザ・ルールズ・オブ・スタイルシート by 益子貴寛

ついにCSS Nite が大阪に上陸しちゃいました。

以下のような内容でした。

まずは益子貴寛さんのセッションから
(もうすぐCSS Nite公式ブログで当日の資料/セミナー内容のポッドキャスティングを公開するらしいので興味がある方、詳しい内容が知りたい方はそちらをご覧ください。)

ザ・ルールズ・オブ・スタイルシート by 益子貴寛

CSS NiteなんでCSSネタをと始まった『カニの貴公子』のセッションです。

「プログラムとはコンピュータへの命令ではなく、コンピューターに何をしてほしいか、人に説明することだ」という有名なプログラマの言葉を引用し「CSSもそうあるべきではないか」と始まりました。

まずはCSSの基本ルールの再確認。

スタイルの特殊性がカスケーディングより優先されるます
ボックスタイプの領域について再確認
要素間の上下マージンの相殺
min-/max-width/heightの矛盾
font-sizeとline-heightについて
baselineとbottomの違い
displayとvisibility
img要素の文字色、背景の意味

などの説明。

min-/max-width/heightはIE6が対応してないので、普段使わないですがIE７で対応している為これから使ってい
かないといけないですね。

line-heightを行間と説明しているのは間違いとの指摘も印象的でした。ついつい「line-heightで行間空けて」とか注文してしまうところです。

次はテクニックとして

positionの説明
floatと親ボックスの高さの問題

positionはあんまり使わないほうがいいのでないかとのこと。
個人的にはpositionは好きで多用するんですけど・・・
興味がある方はpositionプロパティの考察を参考にしてください。

floatと親ボックスの高さの問題はoverflow:autoを使って解決する方法が書かれています。
Web creators 2006年 12月号で書かれてた『すぐ使えるCSSデザインテクニック』のネタですね。
僕もこれを見たときは衝撃でした。

次はCSS2 vs CSS2.1と題して
CSS2からCSS2.1への変更点がまとめられてます。

そして本題『ザ・ルールズ・オブ・スタイルシート』へ

ザ・ルールズ・オブ・セレクタ
- id/class名はわかりやすく
- d/classには要素名を
- 原則id / 例外class
- 区切り記号の統一
- id/classより子孫セレクタ
- 子孫セレクタはわかりやすく
- セレクタは見やすくグループ化く
- 擬似クラスはLV(F)HAの順で
ザ・ルールズ・オブ・プロパティ
- プロパティは１行ごとに
- プロパティの順序を明確に
- ショートハンドは節度を持って
- 前景色と背景色はなるべくセットで
- font-fmailyでは必ず一般ファミリー名で
- floatにはwidthをセットで
ザ・ルールズ・オブ・値
- プロパティごとに値を決めておく
- 0には単位をつけない
- urlパスを決めておく
- 色の指定方法を決めておく
ザ・ルールズ・オブ・構成
- CSSは外部ファイル化する
- すべての外部CSSに＠キャラセット
- ブラウザスタイルを初期化しておく
- 主要インターフェース名を決めておく
- コンテナ名を決めておく
- コメントを有効活用する
ザ・ルールズ・オブ・確認
- まずはcssサポートのよいブラウザで確認
- バリデーションは必ず行う
- CSSカット時をチェックする
- DDTTを実地する
ザ・ルールズ・オブ・CSSハック
- CSSハックの前にバリデーションを
- まずセレクタ/プロパティの工夫を
- なるべく構文的に問題をないハックを
- できればターゲットブラウザの絞込みを