title: BEM Methology: Component thinking and spacing
body: <p>I'm still not 100% sure if this is the right way of thinking when working with BEM and in general with a component way of styling stuff.</p>
  
  <p>Let's say we have a simple button.</p>
  
  <pre><code>.btn {
      //wicked styling
  }
  </code></pre>
  
  <p>There's no spacing CSS-Attribute inside. The button is placed inside a component (.comp1). So imho here comes the BEM-Mix:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="comp1"&gt;
      &lt;a href="comp1__btn btn"&gt;Please press me&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>// _comp1.scss
  .comp1__btn {
      margin-bottom: 20px;
  }
  </code></pre>
  
  <p>First question:
  What if the .btn has in most cases the same margin-bottom: 20px? Do I have to everytime a BEM-Mix? </p>
  
  <pre><code>//_comp1.scss
  .comp1__btn {
      margin-bottom: 20px;
  }
  
  // _comp2.scss
  .comp2__btn {
      margin-bottom: 20px;
  }
  </code></pre>
  
  <p>Of course I could do a general rule in .btn (margin-bottom: 20px) and then overwrite it in the _comp1.scss etc. But then the order of the scss matters I think you mess up everthing?</p>
  
  <p>What is here the best practice? SASS Extend?</p>
  
  <p>Second question (similar):
  For "bigger" components like a panel with other components inside I have like a _verticalrhythm.scss:</p>
  
  <pre><code>//_verticalrhythm.scss
  .comp1,
  .comp2,
  .comp3 {
      margin-bottom: 40px;
  }
  </code></pre>
  
  <p>I recent projects it worked pretty good - but I'm wondering how do you guys are managing these margin stuff.</p>
  
  <p>Thx for answering!</p>