BEM how to avoid class conflicts?

Question

css

BEM seems to solve this problem, but I seem to misunderstand something.
Let's say we have a list of products

<div class="products">
    <div class="product">
        <div class="product__title">Заголовок продукта</div>
        <div class="product__description">Описание продукта</div>
        <div class="product__btns product-btns">
            <button class="product-btns__btn-buy">Купить</button>
        </div>
    </div>
</div>

And there is a separate item

<div class="product">
    <div class="product__title">Заголовок продукта</div>
    <div class="product__description">Описание продукта</div>
    <div class="product__btns product-btns">
        <button class="product-btns__btn-buy">Купить</button>
    </div>
</div>

Product blocks should be radically different from each other, despite the fact that they have the same structure. How to be in such a situation?

Answer 1

Product blocks should be radically different from each other, despite the fact that they have the same structure. How to be in such a situation?

It's just that these are two different blocks, if there is nothing in common between them except for the structure. The list will contain an array of .product-card blocks, on the product page the .product block, of course, you can make any names, to your liking.