How should block modifiers behave in BEM?

Question

css

Hello. Let's say I have a conditional modal:

<div class="modal">
    <div class="modal__title"></div>
    <div class="modal__content"></div>
</div>

And suddenly I took it into my head to make the --small modifier to make it smaller. But then you need to tweak the insides a little. And the question arises how to proceed. Make a cascade or add more rules? That is, like this:

.modal--small{...};
.modal--small .modal__title{...}
.modal--small .modal__content{...}

<div class="modal modal--small">
    <div class="modal__title"></div>
    <div class="modal__content"></div>
</div>

Or like this:

.modal--small{...};
 .modal__title--small{...}
.modal__content--small{...}

<div class="modal modal--small">
    <div class="modal__title modal__title--smal"></div>
    <div class="modal__content modal__content--small"></div>
</div>

Which option is correct (or both are incorrect)? The soul is drawn to the first

Answer 1

1 вариант безусловно. Не стоит прям очень фанатично следовать всем правилам бема.
В любом препроцессоре потом будет удобно писать что-то в стиле:

.modal {
  
  &__title {
    //styles
    
    .modal--small & {
      // styles for small modal
     }
  }
}

Answer 2

BEM doesn't have cascades, does it?
Is not

<div class="modal--small">
    <div class="modal--small__title"></div>
    <div class="modal--small__content"></div>
</div>

Answer 3

From the point of view of naming principles, in the first case you described a modifier for a block, in the second - three different modifiers with the same name (for a block and for each element). In your situation, the first option is more suitable.
BEM does not prohibit describing style cascades, but it does not recommend making selectors for a chain of several blocks (because in this case the blocks begin to depend on each other). In your case, the classes of the block and its elements are indicated in the cascades - this is quite normal.