How to efficiently name the CSS classes using BEM Convention

A quick guide on what is and how to implement BEM 🧑‍💻✨

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 BEM) is a front-end methodology that as the name says, consists of 3 important parts:

• Block

• Element

• Modifier

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

In professional environments, BEM becomes indispensable for code efficiency when using SASS (we'll see an example later).

BEM Convention

TALK OF THE WEEK

What is meant by Block, element & modifiers?

Blocks are fragments of code that have their own 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 BEM 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.

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 we must re-create a CSS rule for what should not get the inherited property, so, we end up doing double work.

And to this, we add that when we want to define a new property to a selector that is 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 BEM

• It communicates purpose: functionalities

• No CSS conflicts: 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 BEM 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.

BEM 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 some code in BEM style

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

BEM in action

In this example, we created a simple card application implementing SASS. And 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!

📍 Connect with us on instagram👇