When to use mixes in BEM and when to use modifiers?

Question

JavaScript

I have a basic card like this:

<div class="card">
      <img src="" alt="" class="card__icon">
      <div class="card__title"></div>
      <div class="card__desc"></div>
    </div>

.card {
    &__icon {
      width: var(--icon-width, 20px);
    }

    &__title {
      margin-bottom: var(--margin-title, 10px);
    }
  }

This card is used in many places, on different pages of the site. And on each of the pages, the values ​​​​of the margin-title and icon-width variables change.

Now I implement everything as follows. For example, on the news page, just using .card, I mix .news-card to it and get the following :

// та же разметка за исключением класса
    <div class="news-card card">
      <img src="" alt="" class="card__icon">
      <div class="card__title"></div>
      <div class="card__desc"></div>
    </div>

.news-card {
    --icon-width: 10px;
    --margin-title: 5px;
  }

And in the future it turns out that if I need to use this "news-card", then I will need to write all the classes again "card news-card".

If we consider the option with a modifier, then you can simply make the .card_page_news class and write everything you need there. But personally, it seems to me that then a huge bunch of styles are formed within one css file with a card modifier for different pages.

Actually, I still can’t fully understand which approach is more correct in which situation to use ...

Answer 1

Open any WordPress site and see how the video-container CSS class is implemented. In WP, the iframe is "wrapped" in a div with the video-container class. Here is the WP site

Answer 2

Usually a certain UI Kit is formed, and at most sometimes it is necessary to modify the display of the block in some cases. Look at what you have with the design, maybe you are trying to fit one block to a million different tasks, while these should be different blocks.
In general, if you're adjusting a style on a case-by-case basis, it's a modifier. If you have a lot of them - that's fine too (in terms of class placement), but note why there are a lot of them, it's not quite typical to have 20-40 different modifiers for one block on different pages.