与 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 块类的使用。如果它们可以独立存在（在 product 块之外），那么你所拥有的就很好。但是，如果它们只存在于产品中，那么您可能希望将它们更改为 product__price 和 product__badge

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

Confused with BEM naming convention - need correction?

css

naming-conventions

bem