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

Question

我正在为学习目的创建电子商务网站，但我遇到了问题。我正在使用 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>

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

Answer 1

我在这里看到的唯一需要考虑的是 price 和 badge block 类的使用。如果它们可以独立存在(在 product block 之外)，那么您所拥有的就很好。但是，如果它们只存在于产品中，那么您可能希望将它们更改为 product__price 和 product__badge