I'm creating ecommerce site for learning purposes. I'm using BEM naming convention in CSS and I ask for your feedback guys.Here's the product block code:<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>I've got problems with products badges and product prices. Tell me, am I doing good? Is it ok with BEM? Or I should change it to:<div class=product__badge-wrapper>  <span class=product__badge product__badge--{$flag.type}>{$flag.label}</span></div><div class=product__price-wrapper>  <span class=product__price itemprop=price>{$product.price}</span>  <span class=product__price product__price--discount>{$product.regular_price}</span></div>Thanks for the feedback
BEM naming convention. Need tips
css;bem