What is BEM?

Hi, I’m Batman. Just kidding ? it’s me, your friendly dev neighborhood, Bonnie Bucad. I’m one of the front-end web developers here in Commude PH. In this blog, I will explain to you what BEM is.

What is BEM?

First of all I will tell you how powerful BEM is if you’re poses with this superpower:

“BEM, or Block-Element-Modifier, is a superpower in the world of front-end development. It gives you the ability to structure your CSS code in a way that is scalable, maintainable, and easy to understand. With BEM, you can tackle even the most complex of projects with confidence and ensure that your code remains organized and efficient. Whether you are working on a small website or a large-scale application, BEM is always there to give you the power you need to succeed.”

BEM stands for “ Block, Element, Modifier” is a popular naming convention for HTML and CSS classes that helps to keep your code organized and maintainable.

One common problem when using class names in CSS is coming up with names that accurately describe the elements they are applied to. This can be especially challenging when working on large, complex websites with many different types of elements. Here’s how BEM can help.

How does BEM Work?

A BEM class name is made up of three entities:

1. Block: A self-contained entity that has meaning on its own, such as a navbar, button, image, footer, section, or container.
2. Element: A part of a block that has no independent meaning but is semantically related to the rest of the block. For example, title, item, list, and checkbox.
3. Modifier: Are used to alter the look, behavior, or state of a Block or Element. For example, background, focus, hover, and checked.

When all three are combined in a class name, the result is as follows:

[block]__[element]--[modifier]

Let’s take a look at the illustration below to get a better idea of how BEM works.

According to the illustration:

1. The card is the Block, which can also be seen as a parent container.
2. The card__image, card__description, card__button are all Elements, which are semantically connected to the card Block. They can also be seen as child items, and are denoted by two underscores following the name of the block.
3. The Modifier card__button–hovered manipulates the card__button so that we can style it without affecting any completely unrelated modules. This is accomplished by appending two hyphens to the element’s name.

Here’s an example of how BEM class names might be used in HTML and CSS:

HTML:

	<div class="card">
		<img class="card__img" src="../img/user_img.png" alt="img">
		<p class="card__description">this is a description</p>
		<button class="card__button">button</button>
		<button class="card__button card__button--hovered">button--hovered</button>
	</div>

CSS:

	.card {
		background-color: white;
		border: 1px solid red;
	}

	.card__img {
		border-radius: 50%;
	}

	.card__description {
		font-size: 16px;
	}

	.card__button {
		background-color: yellow;
	}

	.card__button.card__button--hovered {
		background-color: red;
	}

BEM is like a superhero team-up!

The “Block” is like the main superhero, like Superman or Captain America, who has all the cool powers and abilities. They lead the charge and make the big decisions.

The “Element” is like the sidekick, like Robin or Bucky Barnes, who supports the main superhero and lends a hand in battle. They are an important part of the team, but they don’t have quite as many powers as the main hero.

The “Modifier” is like the power-up, like when Superman goes into his heat vision mode or Captain America gets a shield-boost. It’s a special ability that makes the main hero even stronger and more capable.

Together, the Block, Element, and Modifier make a powerful team that can take on any challenge, just like a group of superheroes!

Please get in touch with me at the following email address if you have any additional queries or require more clarification: bonnie_bucad@commude.ph