Какую вложенную структуру (БЭМ) использовать без изменения HTML

Question

У меня есть два компонента JS, Parent и Child, каждый со своей таблицей стилей scss. Родитель передает строку модификатора Child: one или two. Дочерний объект отображает этот модификатор в своем основном div как класс модификатора БЭМ:

    <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>

Я хочу, чтобы Child не знал о Parent, поэтому я не могу изменить его стиль в Child.scss: это нужно сделать в Parent.scss.

Это Parent.scss:

    .parent {
      $root: &;

      .child--one {
        color: tomato;

        &__item {
          color: yellow;
        }
      }

      .child--two {
        color: blue;
      }
    }

Здесь правило color: yellow; не применяется к .parent .child--one child__item, поскольку оно нацелено на .parent .child--one__item.

Вопрос:

без изменения структуры HTML, как мне удастся изящно и просто нацелиться на .parent .child--one .child__item?

Я хотел бы, если возможно, сохранить .child вложенным в .parent в таблице стилей, чтобы не загрязнять таблицы стилей.

Answer 1

• Я думаю, что это самый организованный способ написать то, что вы предлагаете.

.parent {
  $root: &;

  .child--one {
    color: tomato;
    .child {
        &__item {
          color: yellow;
        }
    }
  }

  .child--two {
    color: blue;
  }
}

Обратите внимание, что yellow влияет только на .child--one предметов, и вам нужно повторить .child внутри .child--one, чтобы повторно использовать преимущества БЭМ в соответствии с именами ваших классов. Например, если позже вы хотите стиль &__title или &__list

• С другой стороны, если вы хотите повторно использовать .child__item независимо от того, какой это ребенок, вы можете сделать это:

.parent {
    $root: &;

    .child {
        &--one {
            color: tomato;
        }
        &--two {
            color: blue;
        }
        &__item {
            color: yellow;
        }
    }
}