css - 与BEM命名约定混淆-需要更正吗？

我正在创建用于学习目的的电子商务网站，但遇到了问题。我正在使用BEM命名约定，但我不知道是否做得很好，这是我的代码：

<div class="product product--miniature" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}" itemscope itemtype="http://schema.org/Product">
  <figure class="product__thumbnail">
    <div class="product__badges">
      <span class="badge badge--{$flag.type}">{$flag.label}</span>
    </div>
    <img src="{$product.cover.medium.url}" alt="{$product.cover.legend}" data-full-size-image-url="{$product.cover.large.url}">
  </figure>
  <div class="product__info">
    <h3 class="product__name" itemprop="name"><a href="{$product.url}">{$product.name}</a></h3>
    <div class="product__prices">
      <span class="price" itemprop="price">{$product.price}</span>
      <span class="price--discount">{$product.regular_price}</span>
    </div>
  </div>
</div>

我对产品徽章和产品价格有最大的疑问，我认为那是哪里出了问题？

最佳答案

我在这里唯一要考虑的是使用price和badge块类。如果它们可以单独存在（在product块之外），那么您所拥有的就可以了。但是，如果它们仅存在于产品中，则您可能希望将它们更改为product__price和product__badge