Mastering CSS BEM naming with Practical Examples: Pure HTML, Angular, and Next.js

In the previous article, we explored the basics of the BEM naming convention in CSS and why it's crucial for maintaining clean and scalable code.

CSS BEM Naming Convention: What It Is, Why It Matters, and How to Use It?

Ahmet Erkan Paşahan ・ Sep 14

#css #bem #html #programming

This time, we will dive deeper with practical examples to see how BEM works across different environments: Pure HTML, Angular, and Next.js.

BEM is not limited to basic HTML structures; it can be effectively applied in any modern frontend framework. By the end of this article, you'll have a clearer understanding of how to implement BEM in various development setups.

Example 1: Using BEM in Pure HTML

In this example, we’ll create a user profile card that dynamically changes its style based on the user’s online or offline status. This is a common use case in real-world applications where elements need to change based on state or condition.

HTML:

<div class="user-card user-card--offline">
  <img src="profile.jpg" alt="User Avatar" class="user-card__avatar" />
  <div class="user-card__info">
    <h2 class="user-card__name">John Doe</h2>
    <p class="user-card__status">Offline</p>
  </div>
</div>

CSS:

.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f5f5f5;
  max-width: 300px;
}

.user-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-card__info {
  display: flex;
  flex-direction: column;
}

.user-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card__status {
  font-size: 14px;
  color: #888;
}

.user-card--online {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.user-card--online .user-card__status {
  color: #4caf50;
}

.user-card--offline {
  border-color: #f44336;
  background-color: #ffebee;
}

.user-card--offline .user-card__status {
  color: #f44336;
}

Explanation:

• The user-card is the block representing the user profile card.
• Modifiers like user-card--online and user-card--offline change the appearance of the card based on the user's status.
• user-card__avatar, user-card__name, and user-card__status are elements of the user-card block representing the avatar, name, and status, respectively.
• The use of BEM makes it clear which styles apply to the block and which styles change based on the status of the user.

Example 2: Applying BEM in Angular

In this Angular example, we'll create an interactive button that shows a loading state when clicked. This is a frequent use case in forms or interactive elements where the state of the button changes based on user interaction or API calls.

Angular Component (button.component.html):

<button class="button" [ngClass]="{'button--loading': isLoading, 'button--primary': !isLoading}" (click)="handleClick()">
  <span *ngIf="!isLoading">{{ buttonText }}</span>
  <span *ngIf="isLoading">Loading...</span>
</button>

Component Styles (button.component.css):

.button {
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: #007BFF;
}

.button--loading {
  background-color: #666;
  cursor: not-allowed;
}

.button--loading span {
  font-size: 14px;
}

Component Logic (button.component.ts):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() buttonText: string = 'Submit';
  isLoading: boolean = false;

  handleClick() {
    this.isLoading = true;

    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

Explanation:

• The button block represents the base button.
• The [ngClass] directive dynamically adds button--loading when the button is in a loading state and button--primary when it’s in its default state.
• The button’s text changes based on the isLoading state.
• The handleClick method simulates a loading state and resets it after 2 seconds, representing a typical API call scenario.

Example 3: Implementing BEM in Next.js

In this Next.js example, we'll create a navigation menu that highlights the active page dynamically. This is a common scenario in web applications where the current page needs to be visually indicated in the navigation.

Next.js Component (components/NavBar.js):

import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav className="nav">
      <ul className="nav__list">
        <li className={`nav__item ${router.pathname === '/' ? 'nav__item--active' : ''}`}>
          <a href="/" className="nav__link">Home</a>
        </li>
        <li className={`nav__item ${router.pathname === '/about' ? 'nav__item--active' : ''}`}>
          <a href="/about" className="nav__link">About</a>
        </li>
        <li className={`nav__item ${router.pathname === '/contact' ? 'nav__item--active' : ''}`}>
          <a href="/contact" className="nav__link">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

Next.js Styles (styles/NavBar.module.css):

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__item--active .nav__link {
  font-weight: bold;
  color: #007BFF;
}

Explanation:

• The useRouter hook from Next.js is used to get the current route (router.pathname).
• The nav__item--active modifier is applied dynamically based on whether the current page matches the menu item.
• The active page is highlighted by changing the text color and making the font bold.
• The nav__link is an element inside the nav__item block.

Conclusion

Using BEM in your project allows you to maintain consistency and scalability in your CSS, even when dealing with dynamic components and changing states. By leveraging BEM for state management, dynamic class changes, and conditional styling, you can keep your code structured, modular, and easy to maintain.

These detailed examples highlight how BEM can be applied in real-world applications, making it easier to manage complex UI components across different frameworks.

Follow Me for More Updates!

I hope this article helped deepen your understanding of using CSS BEM in different platforms. If you're interested in more articles, practical tips, and insights into web development, make sure to follow me for regular updates. Don’t hesitate to reach out if you have any questions or feedback—I’d love to connect and hear from you!