Modifier at parent SCSS, BEM?

Question

Sass

Hey!
There is this markup:

<div className="block">
      <div className="block__element_active">...</div>
      <div className="block__element_hidden">...</div>
</div>

, with these styles:

.block {

  &__element {

    &_active {

    }

    &_hidden {

    }
  }
}

There was a need to set styles for the block, its elements and modifiers depending on the platform (web/mobile).

The markup became like this:

<div className="block block_web">
      <div className="block__element_active">...</div>
      <div className="block__element_hidden">...</div>
</div>

and styles respectively:

.block {

  &_web {

    &__element {

      &_active {
        
      }

      &_hidden {
        
      }
    }
  }
}

but in this case, the linter swears, saying that the selector is not according to BEM: https://i.imgur.com/HjHIrTs.png

Actually, the question is - how best to organize classes and styles for them and at the same time correspond to BEM?

Answer 1

Alternatively use the mix in the
class="block block-web" selector

Answer 2

the linter swears, saying that the selector is not according to BEM:

Of course. You see what happens in the end ...
This is how it should be written:

.block {
  &_web &__element {
      &_active {  }
      &_hidden {  }
  }
}