Which nesting structure (BEM) to use, without modifying the HTML - css

Question

I have two JS components, Parent and Child, each one with its own scss stylesheet. Parent pass a modifier string to Child: one or two. Child renders this modifier in its main div as a BEM modifier class:
<div className="parent">
<div className="parent__title">This is parent</div>
<div className="child child--one">
<div className="child__title">Hello, this is one</div>
<ul className="child__list">
<li className="child__item">item1</li>
<li className="child__item">item2</li>
<li className="child__item">item3</li>
</ul>
</div>
<div className="child child--two">
<div className="child__title">Hello, this is two</div>
<ul className="child__list">
<li className="child__item">item1</li>
<li className="child__item">item2</li>
<li className="child__item">item3</li>
</ul>
</div>
</div>
I want Child to be unaware of Parent, so I can not modify its style in Child.scss: has to be done in Parent.scss.
This is Parent.scss:
.parent {
$root: &;
.child--one {
color: tomato;
&__item {
color: yellow;
}
}
.child--two {
color: blue;
}
}
Here the color: yellow; rule is not applied to .parent .child--one child__item, because it is targeting .parent .child--one__item.
The question is:
without modifying the HTML structure, how can I manage to target .parent .child--one .child__item in an elegant and simple way?
I would like, if possible, to maintain .child nested inside .parent in the stylesheet, to avoid polluting the stylesheets.

Answer 1

I think this is the most organized way to write what you propose.
.parent {
$root: &;
.child--one {
color: tomato;
.child {
&__item {
color: yellow;
}
}
}
.child--two {
color: blue;
}
}
Note that yellow only affects .child--one items and you got to repeat .child inside .child--one in order to reuse the BEM benefits according to your classes names. For example, if you later wanna style &__title or &__list
On the other hand, if you want to reuse .child__item regardless in which child it is, you can do this:
.parent {
$root: &;
.child {
&--one {
color: tomato;
}
&--two {
color: blue;
}
&__item {
color: yellow;
}
}
}