title: SMACSS, Semantic Class Names and Nested Elements
body: <p>I've just read <a href="http://smacss.com/" rel="nofollow noreferrer">Scalable and Modular Architecture for CSS</a> and it's got me thinking about a few things. Snook's two principle tennets are:</p>
  
  <ol>
  <li><strong>Increase the semantic value of a section of HTML and content</strong> </li>
  <li><strong>Decrease the expectation of a specific HTML structure</strong></li>
  </ol>
  
  <p>So this means using semantic class names rather than relying on unsemantic element types for targeting. For example rather than targeting <code>.someClass h5</code>, I might target <code>.someClass-title</code> instead so that if the h5 is swapped out for something else, things don't break. </p>
  
  <p>Personally I find encoding an element's hierarchy in its name kind of unpleasant (even if it is semantically correct). I would prefer doing <code>.someClass .title</code>. But to use a class as generic as title you need to accept that this class will be used in lots of different contexts.</p>
  
  <p>So is there anything wrong with using the same class in completely different contexts if I know it will be namespaced by a previous item in the selector?</p>
  
  <p>For example say I have three different places in my site where a class of 'title' makes sense:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header class="pageHeader"&gt;
     &lt;h1 class="title"&gt;Some Title&lt;/h1&gt;
  &lt;/header&gt;
  
  ...
  
  &lt;article class="leadArticle&gt;
     &lt;h3 class="title"&gt;Some Article Title&lt;/h3&gt;
  &lt;/article&gt;
  
  ...
  
  &lt;ul class="productPreviews"&gt;
     &lt;li class="product"&gt;
        &lt;h5 class="title"&gt;Some Product Name&lt;/h5&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.pageHeader .title
  {
  
  }
  
  .leadArticle .title
  {
  
  }
  
  .productPreview .product .title
  {
  
  }
  </code></pre>
  
  <p><em>Edit: as <a href="https://stackoverflow.com/users/42585/alohci">Alohci</a> mentions in his answer below, a header tag isn't unsemantic, so perhaps this wasn't the best example to use.</em></p>
  
  <p>Obviously I might be doing something completely different to the title in these contexts, but title makes absolute sense with it's module's namespace, and I never have any intention of using title as a general selector.</p>
  
  <p>This seems to tick all the boxes. It is semantically rich, completely decoupled from implementation. For example if the last example was changed into an ol or a stack of divs, nothing would break, and if title was wrapped in a div it would still be targeted.</p>
  
  <p>This makes sense to me, but I haven't seen this approach used much and I'm wondering why. An obvious disadvantage is that you are chaining classes in the selector, but I think this is preferable to namespacing each classname.</p>