はい、あなたの特定の例では、あなたは正しいと思います。おそらくあなたのやり方でそれを行う方が簡単でしょう。しかし、繰り返しになりますが、 OOCSSページの最初の文を見ると次のようになります。
何千ページものCSSをどのようにスケーリングしますか？
その文脈では、2番目の原則は完全に理にかなっています。同じ例を使用します（つまり、ソリューションを実装したと仮定します）。1年後に、会社が黒いフッターに明るい灰色のボタンを作成することを決定したとします。黒のテキスト：
<!-- inside footer -->
<a class="button lightGrey">link</a>
この場合、カスケードaで覆われているため、すべてのタグが白になります。したがって、ソリューションが行ったことを元に戻すために、別のスタイルを作成する必要があります。
.footer a.button.lightGrey {
color: #000; /* huh? but i thought we did this before with a {color: #000;} ?*/
}
aここで、デフォルトですべてのタグが黒であると単純に決定したかのように（最後の注を参照）：
a{ color: #000; }
次に、フッターに、白であると想定される特別なタイプのリンクを作成します。
.footerLinks { color: #FFF }
それから1年後、いくつかのリンクはまだ白です。greyLightボタン内の他のリンクは黒になります。
<a class="button lightGrey">link</a>
次に、ここでは何も元に戻すことを心配する必要はありません。aタグにはデフォルトの色があります。それだけです。2年後、誰かがlightGreyボタン内のリンク（サイトのどこでも、フッターだけでなく、OOCSSの要点です）を赤にする必要があると判断した場合、これはOOCSSアプローチになります。
.redLink {
color: red;
}
そしてhtmlは
<a class="button lightGrey redLink">link</a>
この場合、.lightGreyクラスを削除するか、フッター内にこのコードを含めるかどうかは関係ありません。すべて同じです。結果として、より予測可能で再利用可能なコードになります。 OOCSSです（彼らが最終的にこれを形式化してくれてとてもうれしいです..投稿に感謝します）。
最後の注意：純粋なOOCSSであるためには、デフォルトの色を変更しないでください。aつまりa {color: #000;}、間違っています。、デフォルトの色（青）のままにしておく必要があります。誰かがその色を変更したいときはいつでも、それを指定する必要があります。
<a class="redLink">..</a>
したがって、この場合、デフォルトaは親クラスであるようになります。他のすべてはそれをサブクラス化し、デフォルトの動作をオーバーライドします。
更新-コメントへの応答：
評判の良いサイトの議論：
そのようなイニシアチブは、ほとんどの場合、コミュニティによって推進され、評判の良い企業によって採用されます。大企業によって採用された場合でも、通常、そのような変更を提唱する熱心な開発者を通じてボトムアップで行われます。私はアマゾンで働いていました。そしてそれが採用されたとしても..それは通常小規模であり、組織内のすべてのユニットにまたがるわけではありません。グーグルやアマゾン、フェイスブックなどがそのようなルールを施行するのは良い考えではありませんが、常に意見の相違があります。そのようなマイクロマネジメントがエンジニアの創造性を制約することは言うまでもありません。チームのウィキにはガイドラインがあるかもしれませんが（つまり、Amazon Kindle Touchアプリストアのガイドラインがあります）、会社全体で働く10,000人のエンジニアにそのルールを適用することはできません。
つまり、OOCSSに価値があり、サイトに実装を開始し、それを他のWeb開発者に提唱すると、それがトレンドになり、最終的には業界全体のベストプラクティスになり、次のことが期待できるようになります。 Facebookなどでご覧ください。
例：
これを見てください：
単純： http： //jsfiddle.net/64sBg/
もう少し詳細：http：//jsfiddle.net/64sBg/2/
詳細をあまり説明しなくても（パターンが表示されると思います）、cssの説明の粒度により、スタイル定義に冗長性を持たせることなく微妙な変更が可能であることがわかります。したがって、左矢印と右矢印に注意してください。.redおよび.blueスタイルは、後でテーブルなどに適用できます。
また、私のcssにはカスケードが1つもないことに注意してください。したがって、私のスタイルは完全に独立して適用できます（つまり、ルールを実装すると、オブジェクトはどこに置いても同じように見えるはずです）
最後に..カスケードの使用はまだあります..たとえば、jQueryセレクターで間違いなく使用できます..また、カスケードはデフォルトで発生します（つまり、cssスタイルで明示的に設定する必要はありません）。以下のcssで..bodyのフォントプロパティがすべてのボタンにカスケードされていることに気付くでしょう。
<a class="button blue dark">
<div class=" arrowDownWhite rightArrow">Analytics</div>
</a>
<a class="button red dark">
<div class=" arrowDownWhite leftArrow">Actions</div>
</a>
<a class="button grey light">
<div class=" arrowDownRed leftArrow">options</div>
</a>
およびcss：
body
{
font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 15pt;
}
.button
{
padding: .5em 1em;
display: inline-block;
text-decoration: none;
}
.dark {
color: white;
}
.light{
color: #E40E62;
}
.blue
{
background-color: #51C8E8;
}
.red
{
background-color: #E40E62;
}
.grey
{
background-color: #E0E0E0 ;
}
.arrowDownWhite
{
background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png);
background-repeat:no-repeat;
}
.arrowDownRed
{
background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
background-repeat:no-repeat;
}
.leftArrow
{
padding-left: 1em;
background-position: left center;
}
.rightArrow
{
padding-right: 1em;
background-position: right center;
}