title: BEM nesting naming convention - grandchild element
body: <p>I have the follwing html    </p>
  
  <pre><code>&lt;div class="listing listing--with-margin"&gt;
      @foreach($recipients as $recipent)
        &lt;span class="listing__item"&gt;{{ $recipent }} &lt;input type="checkbox"&gt;&lt;/span&gt;
        &lt;span class="listing__item"&gt;{{ $recipent  }} &lt;input type="checkbox"&gt;&lt;/span&gt;
      @endforeach
  </code></pre>
  
  <p>Should the class on the checkbox be</p>
  
  <pre><code>&lt;input type="checkbox" class="listing__input"&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code> &lt;input type="checkbox" class="listing__item listing__input"&gt;
  </code></pre>
  
  <p>I think option 1 which allows me to write is a lot cleaner in the sass with less nesting. </p>