BEM. How to mark up the text if part of the sentence is highlighted in a different color?

Question

css

Good afternoon!

The question is simple, of course, but it confuses me.

Such a structure:

<td class="table__col shop-col">
                        <p class="shop-col__price">
                          1,2 кг х
                          <span class="shop-col__price shop-col__price--grey">200 руб.</span>
                        </p>
                      </td>

Is it right to do so? From my point of view, this is not entirely correct, because for the "p" container, internal and external geometry can be specified.
Leaving one modifier is not allowed according to BEM.
Mix again, and consider this span as a separate block? Like " price-text price-text--grey "? For some reason, this seems like an awkward decision to me. Then, for uniformity, I should also span the other part and leave the class there without a modifier. But this is clearly overkill.

How would you react to the decision to leave the span without a class and refer to it by tag, through the parent class?

Answer 1

To help you figure it out, you need to see the design and understand the context of the problem, but what I see in your name is some kind of tautology from which beginners begin to dislike BEM

How would you react to the decision to leave the span without a class and refer to it by tag, through the parent class?

Just because you can't think of a name or structure? Very bad.

I recently avoid giving names like item-title )

And you are doing the right thing, what you were offered is a complete game, BEM blocks and elements should not be adjectives and answer the question which, which, which, etc.. this is the work of modifiers.
And now to the point. If you take your markup as a basis, then there are several options. For example, work out the structure. You were told correctly, you wrapped both the price and the weight in the price, which means you are clearly doing something wrong. Your code could be like this:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__price">200 руб.</span>
    </p>
</td>

And you can easily modify any element.
Mixes with classes responsible for color are also possible, you can have predefined classes with specific colors that are repeated in the layout:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__new-price color-accent">199 руб.</span>
        <span class="shop-col__old-price color-grey">200 руб.</span>
    </p>
</td>

Answer 2

<td class="table__col shop-col">
  <p class="shop-col__price shop-col__price--grey">
    1,2 кг х
    <span>200 руб.</span>
  </p>
</td>

.shop-col__price {
  &--grey {
    color: green;
    span {
      color: grey;
    }
  }
}