BEM For Beginners

Naming things in programming is not easy,not only in programming but also in css.Some programmers don't give naming much thought. They say that there isn't enough time to choose the name each class should have. That may be true, but low-quality code takes significantly longer to develop in the long term.So there are several ways to resolving the name issue, one of which is known as Block-Element-Modifier (BEM). We'll take a deeper look at what BEM is and how to use it to arrange your CSS code in this post.

What is BEM?

BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.
BEM also aims to write independent CSS blocks in order to reuse them later in your project.

// Blocks are named as standard CSS classes
.block {
}
// Elements declared with 2 underscores, after block
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}

What is a Block?

Blocks are independent, reusable and usually bigger components of a webpage. They can have modifiers and contain elements.
We can count bigger parts in a webpage like header,nav,section, form,article,aside,footer as block examples.
For example, LinkedIn’s Header Navigation can be used as a block, and can be declared as:

<header class="global-nav"></header>
<style>
.global-nav {
  // Rules
}
</style>

Elements

Elements are children of blocks. An element can only have 1 parent Block, and can’t be used independently outside of that block.Example of linkedIn Header elements are:linkedIn logo,search field and the rests.
An element's name must begin with the name of its parent Block, followed by two underscores, and then the element's own name.

<header class="global-nav">
  <div class="global-nav__content">
     <div class="global-nav__top-left-part">
        <a href="#" class="global-nav__branding">
           <img class="global-nav__logo" />
        </a>
        <div class="search-global">
           <input class="search-global__input" />
           <div class="search-global__icon-container">
              <img class="search-global__icon" />
           </div>
        </div>

     </div>
     <nav class="global-nav__top-right-part">
       <ul class="gloabl-nav__items">
                    <li class="gloabl-nav__item">
                        <a href="#" class="global-nav__primary-link">  
                            <img class="global-nav__icon"/>

                            <span class="global-nav__primary-link-text">Home</span>
                        </a>
                    </li>


                </ul>
    </nav>
  </div>
</header>

Modifiers

Different states or styles of classes are represented by modifiers. They may be used for blocks as well as elements.
In HTML, a modifier must be used in conjunction with its Block / Element to provide additional functionality:

<button class="button button--success">
    Success button
</button>
<button class="button button--danger">
    Danger button
</button>

The naming of a modifier must start with its parent Block name, 2 dashes after it, and end with its own name.

Block — Modifier:

.btn {
  // rules
  .btn--primary {}  // Block modifiers
  .btn--secondary {}
}{% youtube LPHobzrF8xw %}

Let see it in action:

Conclusion

BEM is a new way of authoring CSS that is cleaner and easier to maintain. However, there are some arguments against BEM, claiming that it is ineffective.
Whether you use BEM or not is up to you, your team, and maybe the project. What are your thoughts? Do you prefer to use BEM?

If you like my work, please consider

so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to follow me on Youtube!