When to use a mix and when to use a modifier?

Question

css

Hello.
I have been using bam for a long time, but sometimes I still find myself just at a loss in some situations.
There are 2 cases:

1. First case We have a .contacts block, which is used in the header, footer and on the contact page

.contacts
    .contacts__item
        .contacts__link

In all 3 cases, its elements look and are positioned a little differently. For positioning I make a mix

.contacts.header__contacts
    .contacts__item
        .contacts__link

But the question is how to style the elements:
Giving header_item and header_link mixes is not an option, these classes may already exist in the header outside the .contacts

context 1) You can create another empty mix class

.contacts.header__contacts.header-contacts
    .contacts__item.header-contacts__item
        .contacts__link.header-contacts__link

I used to do just that. But I don't like this approach anymore. First, the class itself looks like it's trying to pass itself off as two. Secondly, we are creating a new block just for the sake of specifying cosmetic changes, which I don't think is correct.

2) You can make a bunch of modifiers for each element separately, but then it's scary to imagine how many modifiers there will be in the project, most of which will be used only 1 time.

3) You can make a modifier for the block and style it in a cascade

.contacts.contacts--theme--header.header__contacts
    .contacts__item
        .contacts__link

.contacts--theme--header .contacts__link {
}

It kind of goes against Bam's ideas, but it seems to me the most successful solution.

2. Second case. We have a basic card block

.card
   .card__img
   .card__inner
      .card__title
      .card__content
   .card__btn

Let's say it is used in a directory. But also on the portfolio page, but looks a little different.
Creating an empty mix of the .portfolio-card class seems like a bad practice to me, because we are tied to the context. But what if this modified card is on some other page? Then the very word portfolio will already be neither in the village nor in the city.
Mix of portfolio_img , portfolio__inner , etc. are also not viable, because we need to change the elements in the context of the card.

I've come to the conclusion that it's best to give cards abstract modifiers

.card.card--type--1
   .card__img
   .card__inner
      .card__title
      .card__content
   .card__btn

.card--type--1 .card__img{
}

And style with a cascade. This gives us complete modularity and freedom. We can use modified cards anywhere in the project. Moreover, you can combine modified cards with element modifiers as you like, for example:

.card.card--type--1
   .card__img.card__img--hover--green
   .card__inner.card__inner--color--red
      .card__title
      .card__content
   .card__btn

.card--type--1 .card__img{
}

Thus I come to the conclusion that mixes are useful mainly for positioning a block in the context of another block and matching the styles of ready-made independent blocks used in the project. And creating them on the fly, only for cosmetic changes, is useless and even harmful.
And the cascade in these cases is Orthodox and useful. And you want to use it more and more, although it is contrary to the doctrines.

I would be very glad to hear reasoned criticism and your thoughts on this matter.

Answer 1

Styles don't interfere with links. Generally.
Check the URL of the link, does it exist?
Studio code. And better on codepen or jsfiddle

Answer 2

"a href="./?action=about" data-nav-section="about" target="_blank">About Us"a>

without target also does not work
"" quotes do not watch this so that the toaster does not consider it as a working link

Answer 3

So not ./?action=about, but ?action=aboutprobably.
PS It was better to post the code as an UPD to the question, and not as an answer