What is the correct name for a nested block in BEM?

Question

HTML

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Название</h2>
    </div>
</div>

The example above shows an example of using BEM from the documentation, but what if I need to use "c-card__title" in a "c-card" block multiple times? Let's say add "c-card__footer, i.e.

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title">Заголовок</h2>
    </div>
    <div class="c-card__foter">
        <h2 class="c-card__title">Заголовок</h2>
    </div>
</div>

In this case, in order to set a separate style for each "c-card__title", it would be better to do 1 option

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__header-title">
Заголовок</h2>
    </div>
<div class="c-card__footer">
        <h2 class="c-card__footer-title">
Заголовок</h2>
    </div>
</div>

Or option 2

<div class="c-card">
    <div class="c-card-header">
        <h2 class="c-card-header__title">
Заголовок</h2>
    </div>
<div class="c-card-footer">
        <h2 class="c-card-footer__title">
Заголовок</h2>
    </div>
</div>

And in general, is it possible to use the second option?

Answer 1

You can leave as in the first option.
Simply styles will be defined like this:

// Если есть общие
.c-card__title {}

// Ну и при каких-либо отличиях
.c-card__header .c-card__title {}
.c-card__footer .c-card__title {}

Either leave the first option and .c-card__titleadd a modifier for it, .c-card__title--headeror .c-card__title--footerhang styles on it.
In the end it will be like this:

<div class="c-card">
    <div class="c-card__header">
        <h2 class="c-card__title c-card__title--header">Заголовок</h2>
    </div>
    <div class="c-card__footer">
        <h2 class="c-card__title c-card__footer">Заголовок</h2>
    </div>
</div>

But I still would stop at the option with a cascade in styles.