BEM As A DRY Convention

It could be called a block. It could be called an element. It also appears to be DRY!

For the uninitiated, “DRY” is a principle in the programming world which aims to avoid repetition as a means of keeping code easier to scale, easier to read, and more effective in its concision. It stands for “don’t repeat yourself”. If we take a second to ponder why repetition is unfavorable in this realm, we can imagine scenarios where we may be required to alter a universal quality which appears in many elements of our applications. Examples of this could be color scheme as it pertains to constituent objects, increasing something like a border radius on all objects which contain one, or even editing padding and margins for all elements to create a more spacious layout.

Let’s use this as an example: I created some cards nested within a <div> which contain an image, header and paragraph tag. They look like this:

The cards are individually stylized as such:

Imagine if we had 900 cards like this, and we suddenly decided we wanted to add a radius to each card. This would take an absurdly long time to apply.

That’s where the BEM convention comes in to simplify things!

BEM is short for “Block Element Modifier”. It suggests naming a class and then using double hyphens as a naming convention for specific block classes and double underscores for the classes of the contained elements, all beginning with the word of the block class.

Our refactored cards will look like this:

<div class='card first--card'>
   <img class='card__image' src='https://www.minecraftguides.org/blocks/bricks.png'>
   <h2 class='card__welcome'>Welcome to BEM!</h2>
   <p class='card__content'>We hope you enjoy your stay.</p>
</div>
<div class='card second--card'>
   <img class='card__image'      src='https://www.minecraftguides.org/blocks/bricks.png'>
   <h2 class='card__welcome'>Welcome to BEM!</h2>
   <p class='card__content'>We hope you enjoy your stay.</p>
</div>

Now, the idea of styling this is to consolidate everything that will be constant or universal about the cards into the block class, which is targeted by the <div> container above. I refactored the CSS file to look like this:

So now, if we wanted to add something like a radius to the corners or change the max width to every single card, we could do it all within this one class!

Next, we stylize the differences we want between each card (if any at all) by targeting the double hyphenated classes. My refactored code looked as such:

MUCH cleaner, right?!?

The end result was this:

(this whole block joke has gotten kind of old…)

Although this is a super basic example, I hope it illustrates its power to you as a principle of not repeating yourself as well as making your code easier to read & scale!

Next up will be BEM as a technique of awakening the Kundalini serpent helix at the base of our root chakras…