BEM layout. File structure. How to assign classes to an independent block?

Question

css

Folder structure

/src
  /blocks
     /header
     /logo

File logo.html in a separate folder logo (block).

<div class=logo>
  <img class="logo__image" src='/'>
</div>

This independent logo block is needed in header.html.
I connect it via Gulp-plugin in header.html file

<div class=header>
  <h2 class="header__title"></h2>
  @@icnlude('../blocks/logo/logo.html')
</div>

And here, for example, it is necessary that in the header, the logo looks a little different. That is, I mix classes, add .header__logo =
But I add this class (header__logo) in the folder - to an independent "logo" block.
Because in the header.html file, I just import the logo.

<div class="logo header__logo">
  <img class="logo__image" src='/'>
</div>

And if the logo is needed in the footer, in the footer-e my classes, I will add .footer__logo =
Again, I add the class in the logo.html file.
This is wrong, since they are classes (their styles) will conflict.
And then what is the right way to do it? Copy the code from the logo folder / block and paste it already in header.html / footer.html / any.html, and already assign the desired class to them?
Or in scss/css write:

.header .logo {
  logo style for header
}

.footer .logo {
  logo style for footer
}

How true?

Answer 1

Disclaimer: I'm not a BEM guru and haven't looked into their docks for a long time. The data needs to be checked.
In my opinion, there are 3 options that do not contradict the methodology:
1) Put the .logo inside the .header__logo element, style the header__logo. Everything is simple, does not require anything special.
2) We hang .header_logo on .logo . A template engine (in this case, a galp plugin) should be able to pass props to included files, i.e. should look like `@include('../blocks/logo/logo.html', {"className": "header_logo"})`. According to BEM, a block can be an element of another block
3) Redefine styles like `.header .logo`. BEM, as far as I remember, also allows you to override styles depending on the context.
4) We make a modifier, for example `logo--highlited`, which we already style within the block. Also, the template engine should be able to do this.
There is no single right way, in my opinion.
For positioning, I usually use the 1st method. For style / color changes only in this particular context - 2 or 3.
If a change is required not only in the context of one block, but somewhere else - then 4.

Answer 2

In fact, the blocks are independent precisely because they should look the same in different parts of the page. If a block is to have some special appearance "in place", then these must be different blocks. BEM does not allow view selectors: .блок1 .блок2 {...}
If the block itself allows some modes of its display (say, a drop-down menu can expand in different directions), then this can be set using BEM block modifiers, but not outside.