gistfile1.html

<!-- Let's say we have a "block" that displays a product's title and price: -->

<div class="product-meta">
  <h2 class="product-meta__title">Foo</h2>
  <p class="product-meta__price">Price</h2>
</div>

<!-- This block has specific styling on a given page. There are other pages when this block is actually included
inside another block. Most styles will be the same, but with very little variations.-->

<!-- SOLUTION 1: Should BEM encourage to duplicate the CSS code, by assuming that the new parent block is actually a 
new "block" context. The advantage is that this block "cart" is now completely independant. Changing style
on "product__meta" would not introduce side effect to this one. However, this leads to duplicated CSS code -->

<div class="cart">
  <div class="cart__product-meta">
    <h2 class="cart__product-meta-title">Foo</h2>
    <p class="cart__product-meta-price">Price</h2>
  </div>
</div>

<!-- SOLUTION 2: Actually re-using the same block, but with a modifier. The advantage is that code is smaller, but modifying
the product-meta styles will also modify them in the context of the block "cart" -->

<div class="cart">
  <div class="product-meta product-meta--modifier">
    <h2 class="product-meta__title">Foo</h2>
    <p class="product-meta__price">Price</h2>
  </div>
</div>