[Vuejs]-How do I use BEM in a component structure?

by

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>
👤LSE

Leave a comment