title: Best Practice on Naming CSS class selector for a same tag, but different behavior
body: <p>Let's say I have a <code>&lt;td&gt;</code> html tag like this:</p>
  
  <pre><code>....
  &lt;td&gt;Sample Item 1 - Common Item&lt;/td&gt;
  &lt;td&gt;Sample Item 2 - Important Item&lt;/td&gt;
  &lt;td&gt;Sample Item 3 - Common Item&lt;/td&gt;
  ....
  </code></pre>
  
  <p>And then for the Important Item I need to (for example) color it in red.
  Currently Common Item don't need any style and I don't know whether in the future it will need any style or not.
  If I want my .Less file follows the best practice on writing css class, should I create the css class in .Less like this:</p>
  
  <pre><code>.item {
      &amp;.item-important {
          color: red;
      }
  }
  </code></pre>
  
  <p>and use it like this:</p>
  
  <pre><code>....
  &lt;td class="item"&gt;Sample Item 1 - Common Item&lt;/td&gt;
  &lt;td class="item item-important"&gt;Sample Item 2 - Important Item&lt;/td&gt;
  &lt;td class="item"&gt;Sample Item 3 - Common Item&lt;/td&gt;
  ....
  </code></pre>
  
  <p><strong>OR</strong> should I only create the css class in .Less like this:</p>
  
  <pre><code>.important-item {
      color: red;
  }
  </code></pre>
  
  <p>and use it like this:</p>
  
  <pre><code>....
  &lt;td&gt;Sample Item 1 - Common Item&lt;/td&gt;
  &lt;td class="important-item"&gt;Sample Item 2 - Important Item&lt;/td&gt;
  &lt;td&gt;Sample Item 3 - Common Item&lt;/td&gt;
  ....
  </code></pre>
  
  <p>I'm a bit confused since in Bootstrap I saw a lot like <code>btn btn-default</code>, or like <code>glyphicon glyphicon-asterisk</code>. Why they don't just put like <code>btn-default</code> or <code>glyphicon-asterisk</code>? I can't seem to find a good post explaining the best practice and reasoning for this naming style for css classes.
  Any insight would be much appreciated!</p>
  
  <p><strong>---------------------------- Update ----------------------------</strong></p>
  
  <p>So I was then reading this documentation <a href="http://getbem.com/naming/" rel="nofollow noreferrer">http://getbem.com/naming/</a>, and found this:
  <a href="https://i.stack.imgur.com/wBIwg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBIwg.png" alt="enter image description here"></a>
  Now I'm sure that if I have the style for <code>item</code> base class, the best practice is putting:</p>
  
  <pre><code>....
  &lt;td class="item"&gt;Sample Item 1 - Common Item&lt;/td&gt;
  &lt;td class="item item--important"&gt;Sample Item 2 - Important Item&lt;/td&gt;
  &lt;td class="item"&gt;Sample Item 3 - Common Item&lt;/td&gt;
  ....
  </code></pre>
  
  <p>But if I don't have the style for <code>item</code> yet, is <code>&lt;td class="item--important"&gt;...&lt;/td&gt;</code> still a bad exercise? I'm also considering YAGNI here..</p>