Should behave as a modifier block in BEM?

Question

Should behave as a modifier block in BEM?

Hello. Suppose I have a conditional modelka:

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

And suddenly I decided to make a modifier --small to less. But then you need a little tweak and inside. The question arises what to do. Make cascade or add more rules? That is so:

.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 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 incorrect) ? Soul pulls to the first

Cary asked July 9th 19 at 12:48

Related questions

More answers about "Should behave as a modifier block in BEM?"

3 answers

jacky_Murazik answered on · Answer 1 · 2019-07-09T12:50:06.018Z

jacky_Murazik answered on July 9th 19 at 12:50

Option 1 of course. Not worth it, just very fanatically follow all the rules precisely.
In any preprocessor then it will be convenient to write something in the style:

.modal {

 &__title {
//styles

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

I'm afraid this scss code doesn't work - Jonathon_Dicki commented on July 9th 19 at 12:53

: why's that? I'm writing a year and a half. Or is there a typo somewhere that I do not see the emphasis? - jacky_Murazik commented on July 9th 19 at 12:56

: was wrong, everything is fine :) - Jonathon_Dicki commented on July 9th 19 at 12:59

You generally live normally with such designs? I on &__title - willow.Hand commented on July 9th 19 at 13:02

: so actually, all normal people on Beme with preprocessors write. - jacky_Murazik commented on July 9th 19 at 13:05

: It is important to clarify that this decision does not contradict the methodology view this problem is similarly solved in the official library https://ru.bem.info/libs/bem-components/v2.4.0/des... - Arne.Altenwerth63 commented on July 9th 19 at 13:08

Bart25 answered on · Answer 2 · 2019-07-09T12:52:06.019Z

Bart25 answered on July 9th 19 at 12:52

in BEM no kaskadnaya same ?
isn't it

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

but if we have the class modal__title--underlined ? - Jonathon_Dicki commented on July 9th 19 at 12:55

then, instead of modal--small__title write modal__title-underlined ) - jacky_Murazik commented on July 9th 19 at 12:58

and if these elements inside a lot? and if the modifiers for these items a lot? better a small cascade than nagymajtenyi modifiers for each item - Jonathon_Dicki commented on July 9th 19 at 13:01

Aiyana.Howe answered on · Answer 3 · 2019-07-09T12:54:06.019Z

From the point of view of naming, in the first case you described, the modifier for the unit, in the second, three different modifier with the same name (for block and for each item). In your situation it is more appropriate first option.

BEM does not prohibit to describe cascades of styles, but does not recommend selectors for chaining of multiple units (because in this case, the blocks begin to depend on each other). In your case, cascades contains the classes of the unit and its elements is quite normal.