Using a Block inside another Block

[dotnetCarpenter]

I'm not seeing this answered in the FAQ, so here goes.

Let's say we have progress bar. It is coded up as stand-alone BEM. But can be used inside other Blocks. What is the naming convention here?

/* Block */
.f-progress {}
/* Elements */
.f-progress__bar {}
.f-progress__value {}
.f-progress__data {}
.f-progress__data-element {}

<section class="f-progress" data-value="38">
    <div class="f-progress__bar">
        <div  class="f-progress__value"></div>
    </div>
    <div class="f-progress__data">
        <p class="f-progress__data-element">
            <span>38%</span> of $50,000
        </p>
        <p class="f-progress__data-element">
            <span>$14,928</span> reached in total
        </p>
        <p class="f-progress__data-element">
            <span>22</span> days to go
        </p>
    </div>
</section>

Now we have another Block, f-thumbnail, that needs to use a f-progress but also need to tweak it to the new context.

Do you duplicate the Elements names as seen below?

<div class="f-thumbnail">
	<a href="/amorfatispace">
		<img
			class="f-thumbnail__image"
			alt="thumbnail image for WEST JAVA, INDONESIA"
			src="assets/image/t-amorfatispace.jpg" />
	</a>
	<div class="f-thumbnail__info">
		<div class="f-thumbnail__content">
			<a href="/amorfatispace" class="f-thumbnail__heading">
				HELP US BUILD AN AUTONOMOUS SPACE
			</a>
			<p class="f-thumbnail__text">
				Amorfati Space is trying to ...
			</p>
		</div>
		<section class="f-thumbnail__progress f-progress" data-value="128">
			<div class="f-thumbnail__progress-bar f-progress__bar">
				<div class="f-thumbnail__progress-value f-progress__value"></div>
			</div>
			<div class="f-thumbnail__progress-data f-progress__data">
				<p class="f-thumbnail__progress-data-element f-progress__data-element">
					<span>128%</span> of €670
				</p>
				<p class="f-thumbnail__progress-data-element f-progress__data-element">
					<span>€859</span> pledged
				</p>
				<p class="f-thumbnail__progress-data-element f-progress__data-element">
					<span>47</span> days left
				</p>
			</div>
		</section>
	</div>
</div>

/* Block */
.f-progress {}
/* Elements */
.f-progress__bar {}
.f-progress__value {}
.f-progress__data {}
.f-progress__data-element {}

/* Block */
.f-thumbnail{}
/* Elements */
.f-thumbnail__image {}
.f-thumbnail__info {}
.f-thumbnail__content {}
.f-thumbnail__text {}
.f-thumbnail__progress {}
.f-thumbnail__progress-value {}
.f-thumbnail__progress-data {}
.f-thumbnail__progress-data-element {}

Or do you add a Modifier to f-progress so that it fits in the new context?

<div class="f-thumbnail">
	<a href="/amorfatispace">
		<img
			class="f-thumbnail__image"
			alt="thumbnail image for WEST JAVA, INDONESIA"
			src="assets/image/t-amorfatispace.jpg" />
	</a>
	<div class="f-thumbnail__info">
		<div class="f-thumbnail__content">
			<a href="/amorfatispace" class="f-thumbnail__heading">
				HELP US BUILD AN AUTONOMOUS SPACE
			</a>
			<p class="f-thumbnail__text">
				Amorfati Space is trying to ...
			</p>
		</div>
		<section class="f-progress f-progress--thumbnail" data-value="128">
			<div class="f-progress__bar">
				<div class="f-progress__value"></div>
			</div>
			<div class="f-progress__data">
				<p class="f-progress__data-element">
					<span>128%</span> of €670
				</p>
				<p class="f-progress__data-element">
					<span>€859</span> pledged
				</p>
				<p class="f-progress__data-element">
					<span>47</span> days left
				</p>
			</div>
		</section>
	</div>
</div>

I believe the last solution is the better one but we're using the former. I don't see an authoritative explanation on getbem.com.

Final bonus question, should the Modifier, f-progress--thumbnail live in the f-progress.css file or in f-thumbnail.css?

PS. Similar but not quite Q/A's

1. Can blocks have other blocks as children, or only elements are allowed? #225
2. Can I use block element inside another nested block? #233 (no answer)
3. BEM: Is it appropriate to create a class called ‘title’ and then use it to style a H1 element inside another block that I have defined? #240 (no answer - but answered in 225)

[dotnetCarpenter]

Actually https://en.bem.info/methodology/css/#mixes suggest that the former solution with duplicated Elements is the preferred choice. Not sure why?