title: How to structure CSS classes? By entities or by aspects?
body: <p>I wonder what fits better into the CSS philosophy:</p>
  
  <ol>
  <li>CSS classes mark entities
  <strong>- OR -</strong></li>
  <li>CSS classes mark aspects </li>
  </ol>
  
  <p>For example let's take the cell for a product price sheet and a footer cell which contains the sum of all prices.</p>
  
  <p>In the first case each of the cells would only have one class: <code>product-price</code> resp. <code>product-price-sum</code> (or <code>price</code> and the row for example has a <code>product</code> class) 
  In other words: <strong>Classes <em>identify</em> things.</strong></p>
  
  <p>In case two the cells would have many classes, which define the properties/aspects of a product price, for example <code>numeric</code> and <code>currency</code> and an additional <code>sum</code> class for the footer. <code>numeric</code> would define the text to be right aligned, <code>sum</code> would mark the cell bold.
  In other words: <strong>Classes <em>describe</em> things.</strong></p>
  
  <p>I can't decide which approach is better. In the past I used a mixture of both which quickly led to an ugly pile of unstructured CSS classes with conflicting styles and some ugly <code>!important</code> hacks.</p>
  
  <p>The first approach obviously has some redundancy, because one would have many classes (<code>product-*</code>) and most of them would share common CSS properties.</p>
  
  <p>The second one has problems when it comes to format just one place differently, let's say the product price sum. It can be possible that there are other places which also have the exact same three classes assigned, but don't have anything to do with a product price. In that case one would have to use the surrounding HTML tags to somehow "address" the specific place in the HTML file.</p>
  
  <p>Are there any rules of thumb, guidelines, proven concepts, etc on how to handle this problem?</p>