How to write an element in a block with a modifier according to BEM?

Question

css

Hello. I convert to BEM. Got a question.
There is a div container block, it has a div container__title element, everything is ok.
But what if I add a modifier to the div container container--pallax block , how do I write the classes div container__title container__title--pallax or divcontainer__title--pallax ?

Answer 1

Modifier for .container block: .container--pallax
Modifier for .container__title element: .container__title--pallax
Possible options:

<div class="container container--pallax">
    <div class="container__title"></div>
</div>

<div class="container container--pallax">
    <div class="container__title container__title--pallax"></div>
</div>

<div class="container">
    <div class="container__title container__title--pallax"></div>
</div>

Answer 2

By adding a modifier to a block .container--parallax {}, you can take into account its presence in the implementation of all elements of the block .container--parallax .container__title {}.
By adding a modifier to an element, .container__title--parallax {}we narrow the scope of the modification to just the element.
How exactly to act is up to you, it depends on the needs, the methodology does not solve such issues.

Answer 3

We write parallax correctly, guys :)

Answer 4

Is it possible to write like this:

<div class="container container--pallax">
    <div class="container__title container__title--type--pallax"></div>
</div>

or

<div class="container container--pallax">
    <div class="container__title container__title--context--pallax"></div>
</div>

?
Under what circumstances can you write like this?