title: Modifying BEM classes with Sass @extend
body: <p>With the BEM methadology, say I have two classes like this:</p>
  
  <p><code>.staff__teacher</code></p>
  
  <p>and <code>.staff__teacher--professor</code></p>
  
  <p>In the markup for the professor, is the idea to have both classes or just the modified class?</p>
  
  <p><code>&lt;div class='staff__teacher staff__teacher--professor'&gt;&lt;/div&gt;</code></p>
  
  <p>or </p>
  
  <p><code>&lt;div class='staff__teacher--professor'&gt;&lt;/div&gt;</code></p>
  
  <p>From my point of view, it seems to make much more sense to go for the latter as it is more streamlined and easier to read.</p>
  
  <p>In Sass, the class would be created by simply extending the <code>.staff__teacher</code> class</p>
  
  <pre><code>.staff__teacher--professor{
      @extends .staff__teacher;
      //...extra professor styles here..
  }
  </code></pre>
  
  <p>However, in the majority of tutorials I've seen on BEM, <em>both</em> classses are added to the markup. Can someone help me understand if one way is preferable to the other? Are there any problems that using my method might cause?</p>