Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.