Modifying elements within a block--modifier correctly - html

Question

I am trying to closely stick to the BEM methodology and I am frequently running into this issue which I feel it is time to ask for a solution (or opinion) to.
Consider I have a human body; this human body is light by default and therefore, it's arms are also light. My pseudo-code in CSS may look like the below:
.human {
background-color: white;
}
.human__arm {
background-color: white;
}
Now we want to add a class for humans who are dark. We can create a modifier for this:
.human--dark {
background-color: black;
}
The problem I am facing is that by now, the human's arm is still white. We can make them black in two ways that I know of:
Solution A
.human--dark {
background-color: black;
}
.human--dark .human__arm {
background-color: black;
}
This solution breaks the BEM methodology by adding specificity to the CSS. However, I feel that this solution is more portable where you are sure to only modify the human and assume that all of its elements will also adapt to the changes of the parent.
Solution B
.human--dark {
background-color: black;
}
.human__arm--dark {
background-color: black;
}
I like to think that a 'Block' is a reusable component in BEM. If the human has various other body parts that also need turning white, it seems less maintainable to modify all of the blocks elements in order to achieve this.
While background-color: inherit; may look like a solution to this case, in a real-world application we may have a dark background that contains elements that require light text.
How would we modify the light text to become dark when its parent block becomes light?

Answer 1

The first solution is the better one assuming that a dark human may not necessarily have a white arm.
The idea behind BEM syntax is to allow for composability. Writing your selector that way defeats this purpose.
A better way to define these selectors is:
.human {} /* block */
.human--dark {} /* modified block */
.human--arm {} /* block element */
These can be altogether composed this way in markup:
<div class="human human--dark">
<div class="human__arm">
Human
</div>
</div>
For your second question, you may want to take advantage of a CSS preprocessor to compute the inverse of the background color for the text color.
In Sass, it's done this way using a custom mixin:
#mixin duotone ($color) {
background-color: $color;
color: invert($color);
}
.human {
#include duotone(white);
}
.human--dark {
#include duotone(black);
}
.human__arm {
}

Answer 2

In order to modify child elements via parent modifier
we should nest the element selector like below:
Block with an element:
.human {
background-color: white;
}
.human__arm {
background-color: white;
}
Block Modifier modifying the child element:
.human--dark {
background-color: black;
}
.human--dark .human__arm {
background-color: black;
}
If we want to achieve the same in SCSS, we can use the following approach:
.human {
background-color: white;
&__arm {
background-color: white;
}
&--dark { // block modifier
background-color: black;
.human { // block
&__arm {
background-color: black;
}
}
}
}

Answer 3

If you're using scss you can use interpolation to avoid duplication
.human {
$c: &;
background-color: white;
&__arm {
background-color: white;
}
&--dark {
background-color: black;
#{$c}__arm {
background-color: black;
}
}
}
Also, this may not be relevant to the question, but using background-color: inherit on the arms would mean you wouldn't have to change any css for the arms as it would inherit from the parent.