How to efficiently name the CSS & HTML Classes using B.E.M. Convention 🎨🧑🏻‍💻

A quick guide about What is the B.E.M. Class Naming Convention? and How to use your code to be more organized and easier to read. 🧑‍💻✨

B.E.M. is a class naming system that allows your code to be more organized and easier to read.

The Block, Element, Modifier (commonly referred to as B.E.M.) is a front-end methodology that as the name says, consists of 3 important parts: Create a Block, Take an Element, and Especified a Modifier

Each follows a set of rules to achieve a simple, powerful, and naming convention that makes classes in HTML and CSS easier to read and understand.

🛈 In professional environments: B.E.M. becomes indispensable for code efficiency when using SASS (we'll see an example later).

B.E.M. Convention

TALK OF THE WEEK

What is the meaning of B.E.M. initials: Block, Element, and Modifiers?

What is the meaning of B.E.M.: Block, Element, and Modifiers?

Blocks are fragments of code that have their meaning and that will be reused, they can be nested but a block doesn't depend on other components.

The element is part of a block, if an element is inside another element does not mean that they are parent and child because there is no hierarchy.

Here’s an example of code, and the B.E.M. concepts:

/* Block component */
<nav>
/* Element that depends upon the block */
    <ul>
    /* Another element */ 
        <li></li>
    </ul>
</nav>

Finally, modifiers can manipulate the behavior or style of the block and elements.

B.E.M. has Problems with CSS?

In CSS there are two main problems:

• Inheritance

• Specificity
  

To define styles we can implement inheritance, for example, in the font-family of an application. The bad thing is that we can't control how far the inheritance goes and must re-create a CSS rule for what should not get the inherited property, so, we end up doing double work.

We add that when we want to define a new property to a selector already affected under CSS rules, we must be much more specific (much better) than the previous specificity.

For example:

/* The text inside li must be white */
li {
    color: #fff
}

ul li {
    color: #000
}

/* And we need an special tag: color red */ 
ul li.red {
    color: red
}
// More specifity is complied

Advantages of B.E.M.

- It communicates purpose: functionalities

• Always unique names

• Easy to maintain: BEM is easy to read, easy component location

• Reusable components: Use the library for big applications

• Not cascading: the elements do not have parents

This is a short introduction to what you have just read:

If there is an error with the player, you can watch the video at the following LINK.

You should consider B.E.M. if you want to restyle a component, and you need to easily see what modifiers and elements exist. And, by reading the markup and CSS, you should quickly get an idea of which element depends on another one.

B.E.M. gives everyone on a project a declarative syntax that they can share so that they’re on the same page.

• Block: Write ".className" (like a conventional class name)

• Element: Use "__elementName" two underscore symbol, follow the element name

• Modifier: "--modifier/Behavior" put two middle dashes before the modifier name

Let's make B.E.M. Styles Ex:

Example B.E.M. Style structure - Blogpost MeltStudio.co

In this B.E.M. methodology, a block is a top-level component, the elements can be placed inside and the modifier can affect either...

In this example, we created a simple card application implementing SASS. Later we switch to the BEM naming convention by defining a block, two elements, and the modifiers with their respective names.

If there is an error with the player, you can watch the video at the following LINK.

---

¡Thanks for reading!

meltstudio.co

📍 Connect with us on Instagram 👇