css - CSS の目的で DOM 要素に名前を付ける方法

Question

DOM 要素にインテリジェントなクラス名を割り当てるのに非常に苦労しています。

以下の例は、私の CSS がよく発展するものだと思います。

<div class="article">
  <div class="title-container">
     <div class="title>Something fantastic</div>
     <div class="sub-title-controls">
        <div class="btn-like"></div>
        <div class="btn-google-plus-one"></div>
        <div class="btn-share"></div>
     </div>
  </div>
</div>

しかし後で、別のスタイルの「共有」ボタンをページの下に追加したいと思うでしょう。だから私はやってしまう：

<div class="article">
  <div class="title-container">
     <div class="title>Something fantastic</div>
     <div class="sub-title-controls">
        <div class="btn-like"></div>
        <div class="btn-google-plus-one"></div>
        <div class="btn-share-tiny"></div>
     </div>
  </div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>

そこから事態は制御不能に陥ります。

私が探しているのは次のようなものだと思います: CSS のスタイルのシカゴ マニュアルはありますか? たとえば、 がまたは<div>としてより適切に説明されるのはいつですか? コンテナーとして機能する非ビジュアル DIV にインテリジェントに名前を付けるにはどうすればよいでしょうか?<section><footer>

私の CSS は、構造なしで 2 年間コーディングした後の悪夢です。この特定のプロジェクトでは、ほとんどあきらめて、すべてインライン化しました。:) ヒントをいただければ幸いです。