title: How to specify state with BEM?
body: <p>Using BEM CSS class syntax, lets say I have an element with the following class:</p>
  
  <pre><code>...
  &lt;div class="purchase__module2__heading__tooltip"&gt;...&lt;/div&gt;
  ...
  </code></pre>
  
  <p>Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes:</p>
  
  <pre><code>...
  &lt;div class="purchase__module2__heading__tooltip--active"&gt;...&lt;/div&gt;
  ...
  </code></pre>
  
  <p>or do I add it</p>
  
  <pre><code>...
  &lt;div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active"&gt;...&lt;/div&gt;
  ...
  </code></pre>
  
  <p>Or can I just do something simple like this:</p>
  
  <pre><code>...
  &lt;div class="purchase__module2__heading__tooltip active"&gt;...&lt;/div&gt;
  ...
  </code></pre>
  
  <p>I think the answer is #2, but it seems very drawn out. #3 is nice and simple but I can't tell if this follows proper BEM guidelines or not.</p>