BEM Modifiers, am I doing it right?

Question

css

There is a structure:

.btn
    .btn__i
    .btn_span

There are two forms. In one form, the button is a red and white icon (i); The other button has a gray and black icon. Making a BEM modifier:

/* белый модификатор */
.btn--red{
    bg: red;
}

.btn--red__i{
    color: white;
}

/* серый */
.btn--grey{
    bg: grey;
}

.btn--red__i{
    color: black;
}

The question is, am I stupid? That is, am I using the modifier correctly?

Answer 1

Firstly, it makes sense to make a block for an icon, because it can be part of anything, not just buttons.
secondly, we kind of agreed yesterday :))

.b{
//  желательно использовать для общих стилей
}
b--m{
// желательно использовать для внешнего вида.
}
.b__e{
//  желательно использовать для позиционирования.
}

otherwise I agree with Sergey . Once again, bem does not forbid nesting. bem encourages you to use them wisely and preferably no more than one level.