1.名前は可能な限り短くする

可能な限り短いid/class名にする。また、名前でどういう要素か判断できるとベストです。
ただし、短くし過ぎて意味がわからなくなるのもNG

悪い例

#wrapper{
    width: 960px;
}

.btm{
    margin: 0 0 20px;
}

良い例

#wrap{
    width: 960px;
}

.bottom{
    margin: 0 0 20px;
}

理由として
id/class名が長すぎると全体的にソースコードが長くなり綺麗なソースコードではなくなるため

2.単語区切りの繋ぎのルールを統一する

id/class名の単語区切りは、統一するようにしましょう。
繋ぎ方は、「-（ハイフン）」「_（アンダーバー）」「キャメルケース」などがあります。

悪い例

#headerInner{
    width: 960px;
}

#main-inner{
    width: 960px;
}

#footer_inner{
    width: 960px;
}

良い例

#header-inner{
    width: 960px;
}

#main-inner{
    width: 960px;
}

#footer-inner{
    width: 960px;
}

理由として
id/class名を統一するためのルール

3.id/class名にはタグの指定をしない

id/class名でCSSを定義する場合は、タグの指定はしないでください。

悪い例

div#main-contents{
    width: 960px;
}

p.red{
    color: #f00;
}

良い例

#main-contents{
    width: 960px;
}

.red{
    color: #f00;
}

理由として
cssのコードを短くするため

4.数値を使用する場合は、ゼロから

連番で数値を指定するCSSを提示する場合は、ゼロから開始してください。

悪い例

.bnr1{
    width: 100px;
}

.bnr2{
    width: 120px;
}

.bnr3{
    width: 140px;
}

良い例

.bnr0{
    width: 100px;
}

.bnr1{
    width: 120px;
}

.bnr2{
    width: 140px;
}

理由として
プログラムの観点に合わせましょう。

5.できる限りid/class名を追加しないようにする

親要素のid名などからの参照でCSSの定義ができるのであれば、その参照を優先する。
（無駄にid/class名を増やさない。）

悪い例

htmlコード
<div id="main-contents">
<p class="txt">綺麗なcssコードを</p>
</div>

cssコード
.txt{
    font-size: 14px;
}

良い例

htmlコード
<div id="main-contents">
<p>綺麗なcssコードを</p>
</div>

cssコード
#main-contents p{
    font-size: 14px;
}

理由として
全体的にソースコードが長くなり綺麗なソースコードではなくなるため

6.できる限り短い定義でプロパティを指定する

分割できるプロパティがいくつかありますが、できるだけ短く定義しましょう。

悪い例

.box{
    padding-top: 10px;
    padding-left: 11px;
    padding-bottom: 12px;
    padding-right: 13px;
}

良い例

.box{
    padding: 10px 11px 12px 13px;
}

理由として
ソースコードの統一のため

7.色定義は3桁で指定する

6桁必要な場合もありますが、3桁で指定できるものは3桁で指定しましょう。

悪い例

.red{
    color: #ff0000;
}

良い例

.red{
    color: #f00;
}

理由として
ソースコードの統一のため

8.プロパティの指定順を統一する

1.位置情報系(position, top, bottom, left, right, z-index, display, float 等)
2.レイアウト系(overflow, width, height, min-width, min-height, padding, margin 等)
3.文字系(font, line-height, letter-spacing, color, text-align 等)
4.背景・ボーダー(background, border 等)
5.その他(animation, transition 等)

悪い例

.box{
    font-size: 12px;
    margin: 0 0 0 10px;
    color: #f00;
    padding: 0 0 0 10px;
}

良い例

.box{
    margin: 0 0 0 10px;
    padding: 0 0 0 10px;
    color: #f00;
    font-size: 12px;
}

理由として
ソースコードの統一のため

9.ブロック開始位置を統一する

悪い例

.box
{
    margin: 10px 0 0 10px;
}

.txt {
    font-size: 12px;
    color: #f00;
}

良い例

.box{
    margin: 10px 0 0 10px;
}

.txt{
    font-size: 12px;
    color: #f00;
}

理由として
ソースコードの統一のため

10.別のセレクタとの記述ルール

別のセレクタを改行するのか、半角スペースを入れて続けて記述するのか、統一する。

悪い例

.box,
.txt,
.line,
.tit{
    margin: 10px 0 0 10px;
}

.img, .txt, .menu, .side{
    padding: 10px 0 0 10px;
}

良い例

.box,
.txt,
.line,
.tit{
    margin: 10px 0 0 10px;
}

.img,
.txt,
.menu,
.side{
    padding: 10px 0 0 10px;
}

理由として
ソースコードの統一のため

11.別のCSS定義との記述ルール

改行を入れ1行空けてから記述する。

悪い例

.box{
    margin: 10px 0 0 10px;
}
.txt {
    font-size: 12px;
    color: #f00;
}

良い例

.box{
    margin: 10px 0 0 10px;
}

.txt {
    font-size: 12px;
    color: #f00;
}

理由として
ソースコードの統一のため

12.プロパティと値の記述ルール

プロパティと値の間に半角スペースを入れる。

悪い例

.box{
    margin:10px 9px 8px 7px;
}

良い例

.box{
    margin: 10px 9px 8px 7px;
}

理由として
ソースコードの統一のため

13.カテゴリ・エリア毎にコメントで区切りを記述する

ページカテゴリ毎・エリア毎に、コメントで区切りを作り、解読性を高める。

コメントの記述例

/* HEADER STYLES
------------------------------------ */
#header{
    width: 960px;
    text-align: left;
}

/* MAIN STYLES
------------------------------------ */
#main{
    width: 960px;
    text-align: left;
}

/* FOOTER STYLES
------------------------------------ */
#footer{
    width: 960px;
    text-align: left;
}

理由として
ソースコードを見やすくするため