How to style such html in BEM style?

Question

css

Greetings to all, connoisseurs! Can you please clarify this question for me. Let's say we have html

<a href="#" class="block">
   <span class="block__element">span</span>
   <span class="block__element2">span2</span>
</a>

And the task is as follows, with the hover effect on .block, you need to change .block__element somehow in your own way and .block__element2 somehow in your own way.
An idea immediately comes to mind

.block:hover .block__element{
    color: green;
}
.block:hover .block__element2{
    color: red;
}

But, alas, this contradicts the BEM methodology, since a cascade in styles is already emerging. How do they solve such a question "BEM-style"? Doesn't javascript need to be attached? It's cumbersome and not convenient to sculpt js, it's easier and more cross-browser to solve this problem through css. I tried to find something in the documentation, looked at the master classes from Yandex developers, and did not find out the solution, or rather, no one simply focused on this, although the problem may lie in other situations when you need to attach the --active modifier to the main block and when active child elements set the style.

Answer 1

I don’t see anything criminal in doing a cascade in this case.
If I'm not mistaken, BEM is about minimizing the cascade, not completely eliminating it.
Especially if from all BEM you use only the naming convention and general principles.
After all, BEM is not Holy Scripture, but simply a methodology, a tool that no one forbids to customize for themselves.

Answer 2

That is how it is done.
It's a view selector block(mod) element, it doesn't go beyond BEM.
(For example .block--left .block__element) The
pseudo-class is just a modifier.