スマートなCSSとは

普段はDreamweaverを使ってホームページを作っています。
最近よく悩むのが、スタイルシートについて・・・
どうしたら、スマートに後から見たときにわかりやすいものができるのかよく悩みます。

最近のマイ・ブーム（古い？）は div タグで大まかにくくってそれぞれに id 属性を設定して、その内部タグやクラス属性に対してスタイルシートを定義しています。

例えばこんな感じです。
text.css
===============================================
/* ********初期設定*********** */
body {
margin: 0px;
}
#menu {
margin: 0px;
padding: 3px;
width: 150px;
float: left;
}
#main {
margin-left: 160px;
padding: 3px;
}

/* ********** id=menu 定義 ********* */
#menu p {
font-size: 80%;
}
#menu ul {
margin: 0.5em 0em;
}
#menu li {
margin-left: 2em;
}

/* ********** id=main 定義 *********** */
#main {
text-align: center;
}
#main h1 {
font-size: 120%;
font-weight: bold;
text-align: left;
}
#main h2 {
font-size: 110%;
font-weight: bold;
text-align: left;
}
================================================

こんな感じでこれ以上書いてもきりがないのでここまでにしておくが、つまり最初に初期設定としてページ全体の中のそれぞれの div タグで囲まれたブロックの位置と幅、マージンとパッディング（幅と密接につながっているので）をここで定義をします。
その後は、それぞれの id 属性ごとに文字の配置や大きさ。各タグや属性での定義をします。
このときにタグやクラス属性のときは id 属性の名前と繋げて定義をすれば後から見てわかりやすく、定義がかぶることもないでしょう。

今日の一言：Dreamweaver ８ になってから、CSSの割り込みができるようになったのでとっても便利になりました。