Модификаторы и дочерние элементы Sass БЭМ

У меня такая БЭМ-установка:

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
        &__row {
          border: 1px solid blue;
        }
      }

Я пытаюсь применить стили строк только к измененному классу таблицы.

Это выводит следующие

.mytable--standard__row {
  border: 1px solid blue;
}

Это явно не то, чего я пытаюсь достичь.

Есть ли аккуратный / стандартный способ решить эту проблему?

не могли бы вы написать ожидаемые результаты, чтобы понять ваши потребности

— 28.05.2018 16:52

Какая цель? Вы хотите применить стили к строкам в таблице? Ваш запрос не понятен.

— 29.05.2018 03:08

"который явно неверен" нет, этот селектор и его правила правильно сгенерированы из предоставленного вами sass. Кроме того, это подходящий способ работы с модификаторами в БЭМ *. Как вы думаете, какой селектор нужно создать? (* существует несколько вариантов БЭМ, поэтому может быть, что в некоторых случаях этот селектор нежелателен, вам нужно указать, какой вариант вы используете).

— 06.06.2018 16:01

sass parent-child bem

28.05.2018 12:53

Оптимизируйте свой CSS с помощью Gerillass: Библиотека Sass для эффективной стилизации

Если вы планируете стать веб-разработчиком, вы наверняка слышали о CSS - языке, используемом для стилизации HTML-документов. CSS является неотъемлемой...

840

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Мы используем:

  .mytable {
      font-size: 16px;
        margin: 30px 0;
      &--standard {
        border: 1px solid red;
      }
      &--standard &__row {
          border: 1px solid blue;
      }
  }

Это не идеально (неплохо было бы выбрать дедушку и бабушку &&), но это лучшее, что мы могли придумать до сих пор.

16.06.2018 00:08

Ответ принят как подходящий

Вы можете добавить еще один амперсанд после модификатора, чтобы получить желаемый результат:

.mytable {
  font-size: 16px;
  margin: 30px 0;

  &--standard {
    border: 1px solid red;
  }

  &--standard & { //<-- 

    &__row{
      border: 1px solid blue;
    }

    &__some-other-element{}

  }

}

Отличный ответ и, насколько я понимаю, не так хорошо известен и не задокументирован.

— 21.06.2018 12:54

20.06.2018 18:14