title: Best approach for web component using BEM and SASS
body: <p>I want to know about the best approach when we have to write a reusable web component (considering possible override by users) using BEM and SASS:</p>
  
  <p>Let suppose to have a main element and a child element, so using bem:</p>
  
  <pre><code>&lt;div class="main"&gt;
    &lt;div class="main__child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to focus on two approaches in SASS:</p>
  
  <p><strong>Approach 1)</strong></p>
  
  <pre><code>.main {
    width: 200px;
    height: 200px;
    background-color: red;
  
    .main__child {
      width: 100px;
      height: 100px;
      background-color: orange;
   }
  }
  </code></pre>
  
  <p>this correspond to</p>
  
  <pre><code>.main {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  
  .main .main__child {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
  </code></pre>
  
  <p><strong>Approach 2)</strong></p>
  
  <pre><code>.main{
    width: 200px;
    height: 200px;
    background-color: red;
  
    &amp;__child {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  }
  </code></pre>
  
  <p>this correspond to</p>
  
  <pre><code>.main {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .main__child {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
  </code></pre>
  
  <p>In the first approach we have a more specific rule so that we can select only classes .main__child that are descendants of .main class. (strong relationship)</p>
  
  <p>In the second approach the two classes are technically separated in the css. Due to the ampersand (&amp;).</p>
  
  <p>I'm confusing on it. Reading on the web it seems that the common pattern is the second approach.
  Can you give me more explanations? Even considering class overriding?</p>