A combination of BEM and Vue?

Question

css

For example, I have a post.

<div class="post">
  <img ckass="post__image>
  <div class="post__title"></div>
  <div class="post__description"></div>
</div>

At some point, I need to make the same post, but without the image. As it would be more correct to do, hang up the post--img_hidden modifier and write .post_image {display: none} there. Or just remove the block with the picture from the layout, without attaching any modifiers? Or add some global "post__image hidden" mixin to the image?

And regarding the situation with Vue. There is a component with the same layout. There is a situation in which you need to remove the picture. Is it more correct to remove it by attaching a class to the component ('post--img_hidden') or passing some prop :imgHidden="true' and just cutting out the image from the template? Or, when passing the prop, attach the class to the desired block?

Answer 1

1. Adding a modifier to hide an image is worse than not adding images, i.e. if you're writing styles for a disabled picchi, you've already shot yourself in the foot.
2. Vue, as the component → component logic fits perfectly into the BEM logic.