Closing a Knowledge Gap: CSS Naming Conventions - BEM

When I was learning CSS I was always just naming at random I might have been .navBar or .nav-bar or .navarea. I was just all over the place, it lead to many frustrating days of hunting down why my CSS wasn't working and the answer was usually in my HTML I had class="navBar" and my CSS is was trying .nav-bar{}.

BEM:

BEM stands for "Block Element Modifier".

BEM is one of the most widely used CSS naming conventions, and it is often used in conjunction with JavaScript frameworks like React. BEM's approach of using descriptive class names that describe the purpose of each element can make it easier to work with CSS in a component-based architecture.

Core components of BEM:

1. Blocks: Blocks are standalone components that can be reused throughout a website. They represent larger, meaningful sections of a page, such as a header, footer, or navigation menu.

2. Elements: Elements are parts of a block and cannot exist outside of their parent block. They represent smaller, functional parts of a block, such as a button or a list item.

3. Modifiers: Modifiers are used to modify the appearance or behavior of a block or element. They can be used to create variations of a block or element, such as a different color, size, or state.

Syntax

BEM class names are typically structured using the following syntax:

.block {}
.block__element {}
.block--modifier {}

For example, if you had a block representing a navigation menu, you might use the following class names:

.nav {}
.nav__item {}
.nav__item--active {}

This structure helps to create clear and consistent class names that are easy to read and understand. BEM is often used in conjunction with JavaScript frameworks like React, as it can help to create more organized and maintainable components.

Code Example

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link--active">Home</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">About</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link nav__link">Services</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">Contact</a>
    </li>
  </ul>
</nav>

.nav {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
}

.nav__list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 80%;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
  padding: 0;
}

.nav__link {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

.nav__link--active {
  color: green;
  font-weight: bold;
}

---

Further Reading:

getbem.com/

---

❤️❤️❤️

Follow me on LinkedIn for all the updates and future blog posts

Other blogs in this series:

Closing a Knowledge Gap: Best Practices for Writing Git Commit Messages

Comments

[AndyDziabo]

Nice post, I am definitely guilty of random naming of CSS classes. It is always an annoyance looking back and forth between code and the CSS file to check what I named something. This would definitely help eliminate that, using a standard of naming.