How to do BEM?

Question

HTML

Hello.
For example, there are two blocks with social networks:

<ul class="socials">
...
</ul>

CSS:

.socials {
  color: #000;
}

The first block, located in the header of the site, has social icons. black nets.
And the second block, located in the footer of the site, they should be white.
How to add an additional class for the second block, according to BEM rules, so that the icons would have a white color in the footer?
You need to add a modifier or mixin. And how to call?
Thank you!

Answer 1

If the differences are stylistic, that is, it can be assumed that one of the two options can be used anywhere, then it is better to do it through a modifier with a key and its value. For example:
socials_theme_ligth
socials_theme_dark
where theme is the key and ligth and dark are its values, which cannot be used simultaneously on the same block.
For the rest of the changes that only need to be made to the footer, we apply the mix . For example, we need a light theme, but in the footer we need to add an indent from above or some other changes in this context. It might look like this:

<ul class="footer__socials  socials socials_theme_ligth">
...
</ul>

.socials {
  color: #000;
}
.socials_theme_ligth {
  color: #fff;
}
.footer__socials  {
  margin-top: 100px
}

Answer 2

You can write general styles for .socials, and put the color in .socials--header and .socials--footer. Thus, it will be possible to override the color of the icons at any time without relying on the class name (as is the case with .socials--white)