.code-gray {
padding: 5px;
background: #f5f5f5;
}
.wysiwyg-front a { text-decoration: underline; }
.note {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #ccc;
}
.note h4 {
color: #666;
margin-top: 0;
margin-bottom: 8px;
line-height: 1em;
}
.note p:last-child {
margin-bottom: 0;
}
.note-red { border-left-color: #ce4844; }
.note-red h4 { color: #ce4844; }
.note-blue { border-left-color: #1b809e; }
.note-blue h4 { color: #1b809e; }
.note-green { border-left-color: #4cae4c; }
.note-green h4 { color: #4cae4c; }
.note-yellow { border-left-color: #aa6708; }
.note-yellow h4 { color: #aa6708; }

Nicole Sullivan氏によって提唱されたOOCSS（Object Oriented CSS）について紹介します。
OOCSSはBootstrapやFoundationなど、多くのCSSフレームワークで採用されているもっとも有名なCSSの設計指針です。

OOCSSの原則

1. ストラクチャとスキンの分離

CSSプロパティは大きく2つに分類できます。

1つ目は要素のストラクチャ（構造）を決定するもの。 eq.) display, float, width, margin
2つ目は要素のスキン（見た目）を決定するもの。 eq.)color, background-color, font-weight

OOCSSではストラクチャとスキンを別のルールセットして定義することで、CSSの再利用性を向上させます。

Tranditional

— HTML

<button type="button" id="primary-btn">Primary</button>

— CSS
#primary-btn {
	display: inline-block;
	padding: 6px 12px;
	text-align: center;
	border: 1px solid transparent;
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

OOCSS like
— HTML
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

— CSS
.btn {
	display: inline-block;
	padding: 6px 12px;
	text-align: center;
	border: 1px solid transparent;
}
.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

まず、OOCSSではセレクタとしてidは基本使用しません。クラスを複数組み合わせるマルチクラス設計になります。

従来の方法ではCSSプロパティを読み解くことが多かったと思いますが、OOCSSではその逆で、どのセレクタを選択するかがポイントとなります。よって、クラスの命名規則も重要となってきます。
2. コンテンツとコンテナの分離
CSSセレクタはHTMLの構造に依存すべきではありません。

HTMLの構造が変わったとしてもCSSの修正が必要にならないように設計するべきです。
OOCSS like
— HTML
<ul class="list">
	<li>A</li>
	<li>B</li>
	<li>C</li>
</ul>

— CSS
.list { ... }
.list-item { ... }

要素セレクタを使用しないことで、CSSセレクタはHTMLの構造に依存しなくなります。

上記HTMLがli要素からa要素に変わったとしてもCSSの変更は必要ありません。
OOCSSではコンテンツとコンテナを分離することで、CSSのメンテナンス性を向上させます。
そして、OOCSSの発想の原点はパフォーマンスの向上にあります。
CSSセレクタは右から左に解釈されるので #foo.bar{} より .bar{} の方が高速です。

#wrapper #sidebar ul li{} のように子孫セレクタで指定すると、”すべてのli要素を探す→すべてのulを探す→…”と動作するため遅く、li要素にクラスをふって .list-item{} とした方がはるかに高速なのです。
よって、OOCSSではCSSのパフォーマンスを向上させます。
実践的設計手法
OOCSSの原則は理解したかと思いますが、これを成功に導くためには、やはり、設計にかかっています。
よく直面するであろう問題について、設計指針を提唱します。

それは「分離する密度をどうするか？」ということです。
最適な分離の密度とは、すべてのサイトで適用可能なグローバルスコープのルールセットと、固有のサイトで適用するサイトスコープのルールセットの2パターンで考えると良いでしょう。
/* グローバルスコープ */
.alignright { float: right; }
.alignleft { float: left; }

.ref { position: relative; }
.abs { positopn: absolute; }

/* サイトスコープ */
...

また、実際のプロジェクトでは、スタイルガイドラインの策定がとても重要になってきます。
複数人で書いたCSSを第三者が読んだときに、まるで一人で書いたCSSであるかのように思えると、上手なCSSの書き方ができていると言えるでしょう。
OOCSSのようなマルチクラス設計では、ルールセット間に依存関係が生まれます。

.btn-primary は .btn と同時に使うことが必要であり、.btn-primary 単体では機能しません。
そのため、使い方のドキュメントやUIコンポーネントを一覧できるスタイルガイドラインが必要になってくるのです。
スタイルガイドラインの策定手法についてはまたの機会に紹介しますが、まずはGoogle HTML/CSS Style Guideを一読しておくとよいでしょう。
参考: OOCSS（オブジェクト指向CSS）のススメ