How do I use BEM in a component structure?

Question

I am currently trying to use BEM in a training project. To start with. I like having structure in my CSS. However, I am having a problem using BEM correctly. In the current case I don't know if I have understood the M = modifier correctly.

Use case: I have a list of documents. I iterate this list and pass the single document (name, size, path, mime) to a component "DocumentItem". I have already thought of the following structure:

DocumentListing.vue (parent)
<div  v-for="item in list" class="documentListing">
  <DocumentItem :data="item"/>
</div>


DocumentItem.vue (child)
<div class="listItem">
  <img class="listItem__image" />
  <div class="listItem__name">abc</div>
  <div class="listItem__size">0 KB</div>
</div> 

Question: My ChildComponent is now only a BE instead of BEM. Or do I have to consider the structure as a whole? So the B in the ParentComponent (documentListing) and EM in my ChildComponent. Like "documentListing__listItem-image" I am a bit confused at the moment and hope there are some good comments from you.

Answer 1

Your current structure is correct for BEM style.

You don't have to to use the M all the time.
It's meant to be used if you need to modify the current style.
A good example would be if the image of one of them was different, then you would have something like:

<div class="listItem">
  <img class="listItem__image" />
  <div class="listItem__name">abc</div>
  <div class="listItem__size">0 KB</div>
</div>
<div class="listItem">
  <img class="listItem__image listItem__image--large" />
  <div class="listItem__name">cde</div>
  <div class="listItem__size">0 KB</div>
</div> 

Furthermore, if you prefer, you don't need to create a new Block either.
The Element doesn't need to be a direct child of it's Block.
The example below is also valid BEM.

<div class="documentListing">
  <div class="documentListing__item">
    <img class="documentListing__img" />
    <div class="documentListing__name">abc</div>
    <div class="documentListing__size">0 KB</div>
  </div>
</div>