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…

--

--

--

Programmer / Artist / Believer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Uncle Bob Says : Acceptance test should be written during the sprint

How we Scaled our Billing Platform

Integrate IoT Device with AWS IoT using Python — Part II: command-and-response

7 lessons learned and unlearned from my computer science education

The 6 Key Business Benefits of SAP HANA

Copy List Item easily using Infowise Ultimate Forms Actions Feature

“Scrappy Path”

A “scrappy path” is some user’s “happy path.”

PathDAO announcing USD 7000 XP Leaderboard Referral Rewards

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lucas Thinnes

Lucas Thinnes

Programmer / Artist / Believer

More from Medium

Bit-Masking To Generate Subsets

Untried Wild

Naming a Rapidly Reusable Rocket

What Is Biblical Literacy And Why Does Your Family Need It?

What Is Biblical Literacy And Why Does Your Family Need It? ☀ Get to know your Bible. When you do you'll get to know the one who created you and be able to share Him with others.