CSS вложенного селектора не применяется к div

Question

Я использовал метод БЭМ, и мой <div> показывает css из блока и модификатора, но не элемент

, то есть css для c-banner (блок) и--warning (модификатор) появляется, но не __icon (элемент).

Я знаю, что color модификатора появляется, потому что я пытался изменить его на другой color, и он появляется в пользовательском интерфейсе.

Например: В настоящее время:

&--warning {
  color: #D9822B
}

Отредактировано:

&--warning {
  color: black
}

После изменения значок --warning будет отображаться с черным цветом в пользовательском интерфейсе.

Однако padding-right из __icon никогда не применяется.

c-banner {
/* Block CSS Properties */

  &__icon {
    padding-right: 12px;

    &--warning { /* Used for warning purposes */
      color: #D9822B;
    }

    &--primary { /* Used for general information */
      color: #137CBD;
    }

    &--success { /* Used for verified access */
      color: #0F9960;
    }

    &--danger { /* Used as a hard stop */
      color: #DB3737;
    }
  }
}

Я искренне озадачен, почему padding-right из __icon не применяется, а color из --warning равно

Answer 1

Все, что вам не хватает, это: .c-banner ..... точка перед именем класса

Кроме того, для работы отступов они должны быть внутри --warning, потому что вы объединяетесь в цепочки для формирования полногоселектор, и нет селектора, который заканчивается на __icon

Вы можете ввести material-icons, если хотите повлиять на несколько:

.c-banner {

  .material-icons { padding-right: 12px; } 
  /* can also do [class*="__icon"] but may be less predictable */

  &__icon {
    /* rest of the scss */
  }
}