大まかに４つの方法。

書き方は色々あると思いますが、以下の４つの方法に分けられると思います。

１、各liに対してidをつけることで、それぞれのリストを表現する

li#top {
	color: #FFF;
}

２、idを付加したdivでulを囲み、各liにclassを付加する

div#menu ul li.top {
	color: #FFF;
}

３、ulにidを、各liにclassを付加する

ul#menu li.top {
	color: #FFF;
}

４、各liにclassを付加する

div#nav ul li.top {
	color: #FFF;
}

４つの書き方の解説。

１、まず初歩的なやり方として、各liにidを付加するやり方。
この場合のhtmlはあまり汚れることがないのですが、idを利用していることで、ページ内で２度目の出現が許されないのが、難点です。
例えば、「div id="footer"」に見た目は違うけど、内容が同じナビゲーションをつけたいと思った場合、再度idもしくはclassを付加して表現しないといけなくなります。

２、cssに慣れてきた頃によくあるdivを作ってその中で展開してしまうパターン。
確かにdivで囲んでしまえば大概のことはできてしまいますが、divばかりが増えて、htmlが汚くなってしまうのが難点。

３、２の状態から少し進化した形。
htmlの要素に対して、idやclassを付加することに臆しなくなるとしめたものですね。

４、最後に外の大枠で括っているdivを利用して指定する方法。
「div id="nav"」内に２つのリストが必要な場合は、３の方法をとらざる得ないですが、もし「div id="nav"」内に１つのリストだけが存在する場合は、４の方法がよりhtmlを汚すことなく表現でき、かつ拡張性も高いので望ましい形と言えます。

以上４つのやり方を書きましたが、cssレイアウトをしていく中で、３か４の方法を身につけて行けばいいと思います。

おおーと思ったけど、あんまり使うことなさそうな気がします…。

DIVの終了タグ前に配置するコメント：IDセレクタ用

HTML内では多くのDIVが使用されるので、どのDIVの終了タグかをわかりやすくするために使用します。

コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。

<！-- / div#selector_name -->

DIVの終了タグ前に配置するコメント：CLASSセレクタ用

ID用と何が違うかって、divあとが「#」か「.」かだけなんですけどね。ちょっとしたことだけど、これで分かりやすくなります。

コメントアウトで見れなくなっちゃうので、「!」を全角にしてます。ご注意。

<！-- / div.selector_name -->

width（及びheight）のオリジナルサイズを記載しておく

%で指定してると必要ないんだけどね。そうじゃない場合も往々にしてあります。

paddingを使用した際に、想定していたwidthの値がpaddingにとられちゃいますね。で、もし再度paddingを設定し直すことがあったときに、わざわざ足し算したりするのが面倒くさいので、このコメントを入れておいてオリジナルサイズを分かりやすくしておきます。

/* original size = ***px */

主張したい説明を挿入する

長めの説明文を入れたいときに使います。

/*---------------------------------------------------
                    せつめいぶん
-----------------------------------------------------*/

プロパティを書く順序ヒント

プロパティを書く順序をサイト内で決めておけば、他人が触ることになったときに少しは見やすくなります。そのための順序アンチョコ。

/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */

CSSのコードの最後に表記しておく

Dreamweaverで1000行を超えるcssを書くと急にぶっ壊れる現象が起きたことがあって、どこまで読み込んでいるのかわからなくなったことがあったので、とりあえずここが最後ですよ、という目印をつけておきます。

/*EOC*/

リセット設定用

/* RESET */
html,body,div,
ul,ol,li,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,form,p,blockquote,fieldset,input {
	margin: 0;
	padding: 0;
}

h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
pre,code,address,caption,cite,code,em,th {
	font-size: ***;/* 好みのフォントサイズを入力 */
	font-weight: normal;
	font-style: normal;
}

html {
	overflow-y:scroll;
}

ul,ol {
	list-style: none;
}

fieldset,img {
	border: none;
}

caption,th {
	text-align: left;
}

img,abbr {
	border: 0;
}

clearfix

div {
	zoom: 1;/*for IE 5.5-7*/
}

div:after {/*for modern browser*/
	display: block;
	visibility: hidden;
	clear: both;
	height: 0px;
	line-height: 0;
	font-size: 0em;
	content: ".";
}

dtとddを横並び

dt,
dd {
	margin-bottom: **px;
}

dt {
	float: left;
}

dd {
	margin-left: **px;
}

hrを装飾

hr {
	border-top: 1px dotted #999;
	border-right: none;
	border-bottom:1px solid #FFF;
	border-left: none;
	width: **px;
	margin: 0px auto;
}

min-height IE対応版

div {
	min-height: 100px;
	height: auto !important;
	height: 100px;
}