amespace prefix in all class names that belong to a logical group of elements:</p>
<pre><code class="lang-css">  /* AVOID */
  .chat.container {/*...*/}
  .chat .item {/*...*/}
  .chat .avatar {/*...*/}
  .chat .text {/*...*/}

  /* PREFER */
  .chat-container {/*...*/}
  .chat-item {/*...*/}
  .chat-avatar {/*...*/}
  .chat-text {/*...*/}
</code></pre>
</li>
<li><p><strong>Use only single-class selectors</strong> - This convention goes hand-in-hand with the previous one: avoiding high specificity selectors