How to use BEM mixins (**modifiers** — I wrote something wrong) BEM?

Question

css

If you assign a modifier to a block, then a cascade is obtained to modify the element. If you assign a modifier to each element, you get a bunch of additional classes, which can probably be called redundancy. How right?
HTML:

<div class="button button_red"  lang="html">
        <i class="button__i"/>
        <span class="button__txt">Lorem</span>
    </div>

CSS:

.button{
     ......
}

.button__i{
     ......
}

.button__txt{
     ......
}
/* как видно ниже модификатор блока порождает каскад */
.button_red  .button__i{
    color: red;
}

.button_red  .button__txt{
    color: red;
}

The example is simplified. There can be many more elements in life

Answer 1

SCSS mixin

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

usage

.block {
    /* CSS declarations for `.block` */

    @include element('element') {
        /* CSS declarations for `.block__element` */
    }

    @include modifier('modifier') {
        /* CSS declarations for `.block--modifier` */

        @include element('element') {
            /* CSS declarations for `.block--modifier__element` */
        }
    }
}

Answer 2

The cascade from the modifier to the elements is a normal practice, BEM does not call for abandoning the cascade at all, but simply advises to avoid it if possible, and most importantly, think with your head.