0

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.

LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
  • The first one. The second option would give both the `span` and `input` the class `listing__item` - which I assume you wouldn't want? – sol Aug 30 '17 at 10:00
  • definitely, the first one. The second variant is called `mixin`, and it's not suitable here – Andrey Ponomarenko Sep 13 '17 at 20:07

2 Answers2

0

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.

G.Hunt
  • 1,364
  • 10
  • 20
  • `` does not use a closing slash. – Rob Aug 30 '17 at 12:49
  • @Rob according to [this](https://stackoverflow.com/a/7854998/8375199) answer, an `input` is a void element, the closing slash is optional. However, for best practice, I have removed the slash in the answer. – G.Hunt Aug 30 '17 at 12:53
  • Yes and the closing slash does nothing, means nothing, is not specified for the element itself and browsers are instructed to ignore it. So it has no value and is pointless. – Rob Aug 30 '17 at 12:54
0

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>
optiman
  • 93
  • 7