BEM nesting naming convention - grandchild element

Question

I have the follwing html

<div class="listing listing--with-margin">
    @foreach($recipients as $recipent)
      <span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
      <span class="listing__item">{{ $recipent  }} <input type="checkbox"></span>
    @endforeach

Should the class on the checkbox be

<input type="checkbox" class="listing__input">

or

 <input type="checkbox" class="listing__item listing__input">

I think option 1 which allows me to write is a lot cleaner in the sass with less nesting.

Answer 1

If you take a look at the Naming page in the BEM documentation, at the bottom you'll see an example section, with a form block.

In the example, you will find the <form> element, with a couple of <input />s.

Each <input> has its own element class of either .form__input or .form__submit, both inheriting from the block .form class. They do not inherit more than one class.

However, you will notice that they have multiple modifier classes, which is acceptable.

Answer 2

There are 3 options for grandchildren element.

• Flattening grandchildren

<article class="post">
  <div class="post__meta">
    <div class="post__category">...</div>
    <div class="post__date">...</div>
  </div>
  ...
</article>

• Creating new blocks

<article class="post">
  <div class="post__meta">
    <div class="category post__category">...</div>
    <div class="date post__date">...</div>
  </div>
  ...
</article>

• Extending the BEM naming convention

<article class="post">
  <div class="post__meta">
    <div class="post__meta__category">...</div>
    <div class="post__meta__date">...</div>
  </div>
  ...
</article>