title: What to name my DOM elements for CSS purposes
body: <p>I'm having a very hard time assigning intelligent class names to my DOM elements.</p>
  
  <p>I feel like the example below is something my CSS commonly devolves into:</p>
  
  <pre><code>&lt;div class="article"&gt;
    &lt;div class="title-container"&gt;
       &lt;div class="title&gt;Something fantastic&lt;/div&gt;
       &lt;div class="sub-title-controls"&gt;
          &lt;div class="btn-like"&gt;&lt;/div&gt;
          &lt;div class="btn-google-plus-one"&gt;&lt;/div&gt;
          &lt;div class="btn-share"&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But then later I'll want to add a different style of "Share" button lower on the page.  So I end up doing:</p>
  
  <pre><code>&lt;div class="article"&gt;
    &lt;div class="title-container"&gt;
       &lt;div class="title&gt;Something fantastic&lt;/div&gt;
       &lt;div class="sub-title-controls"&gt;
          &lt;div class="btn-like"&gt;&lt;/div&gt;
          &lt;div class="btn-google-plus-one"&gt;&lt;/div&gt;
          &lt;div class="btn-share-tiny"&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;...More stuff...&lt;/div&gt;
  &lt;div class="btn-share-big"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then things spiral out of control from there.</p>
  
  <p>I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS?  Like when is a <code>&lt;div&gt;</code> really better described as a <code>&lt;section&gt;</code> or <code>&lt;footer&gt;</code>?    How do you intelligently name non-visual DIVs that serve as containers?</p>
  
  <p>My CSS is a nightmare after 2 years of coding without structure.  Just about given up and gone all inline on this particular project.  :)  Tips appreciated.</p>