Question about modifiers?

Question

HTML

2 blocks with buttons: the first in the header, the second in the footer.
The first one has a slightly gray color of the icons.
the basement is white.
Here are my own questions:
1) can I set the initial color of the element in the block, the one in the basement, override with a modifier?
2) did I specify the modifiers on hover correctly, or just specify the color?

Answer 1

1. BEM links must be declared rigidly .social__btnin the example, they can be used in another place, outside the parent, this is not BEM. You have to explicitly specify in css .social .social__btn ....
2. The rest seems to be correct, but personally I would not do that.
3. There are still impurities that are relevant in the "basement override", but in this case, since the modifiers are inherently different, this question is incorrect, and this method is not suitable. There are just 2 completely different modifiers, one paints white, the other purple.
PS: Modifiers must also be explicitly linked to the parent, and not specified separately.