CSS tips and tricks at The Blog Herald

CSSを書く際の5つのテクニック。



1. サイズ指定の際はピクセルを使うな。

body { font-size: 62.5% }
p { font-size: 1.2em; line-height: 1.5em; }

px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。

2. 階層構造はインデントして読みやすくしよう

h1 {}
　　h1#logo { font-size: 2em; color: #000; }
h2 {}
　　h2.title { font-size: 1.8em; font-weight: normal; }

確かに、これは分かりやすいかもしれません。今後導入しようと思います。

3. セクションごとにコメントを入れて構造化しよう

/* Structure */
...
/* Typography */
...

これは多くの方がやってるんじゃないでしょうか？
ただ、ＣＳＳのサイズが肥大化してくると結局分かりづらくなるので、それ以降はファイルに分けてスクリプトで連結するのがよさそう。

4. divを使いすぎないようにしよう

誰もが犯されるdiv病には注意ということですね。

5. 最初にすべての要素を初期化しよう

* { margin: 0; padding: 0; }

各要素のデフォルトのマージンが0になり、デザインしやすくなります。
個人的に、(2)の階層構造はやってなかったことで便利だなぁと思いました。
結構階層が深くなってしまったりする場合もこれであれば比較的分かりやすいですね。