Mastering HTML Class Naming: Boosting CSS Efficiency

Serhii Shramko

Serhii Shramko /

4 min read • --- views

White smartphone on two softbound books

HTML Class Naming Conventions with BEM Methodology: Enhancing CSS Naming Conventions

As a web developer, you understand the importance of keeping your codebase clean and maintainable. One of the crucial aspects of achieving this goal is following HTML class naming conventions.

In this article, we'll delve into the world of HTML class naming conventions, with a specific focus on the BEM (Block, Element, Modifier) methodology. We'll explore how this approach enhances CSS naming conventions, improves code readability, and makes your codebase more organized.

Understanding the Importance of HTML Class Naming Conventions

Effective HTML class naming conventions are vital for several reasons:

  1. Readability: Well-structured class names make your HTML and CSS easier to understand, even for developers who didn't write the code.

  2. Maintainability: Properly named classes simplify the process of making changes or additions to your code, reducing the risk of breaking existing styles.

  3. Collaboration: Naming conventions facilitate collaboration among team members, making it easier to work on the same codebase.

  4. Scalability: Consistent class naming conventions are essential for managing large projects and ensuring they remain scalable.

BEM Methodology: A CSS Class Naming Convention

BEM, which stands for Block, Element, Modifier, is a popular CSS class naming convention. It provides a structured and consistent approach to naming classes. Let's break down the components of BEM:

1. Block

A block is a standalone component that represents a high-level element or a module on a web page. It's usually a container for one or more elements within it.


<div class="block">
  ...
</div>

2. Element

An element is a part of a block and is semantically tied to it. It is named using a double underscore (__) as a separator.


<div class="block">
  <div class="block__element">
    ...
  </div>
</div>

3. Modifier

A modifier is used to change the appearance, behavior, or state of a block or element. It's named using a double hyphen (--) as a separator.


<div class="block">
  <div class="block__element">
    ...
  </div>
</div>

<div class="block block--modifier">
  ...
</div>

<div class="block__element block__element--modifier">
  ...
</div>

Examples of BEM Methodology in Action

Let's see how BEM methodology applies to real-world examples:


<nav class="navigation-menu">
  <ul class="navigation-menu__list">
    <li class="navigation-menu__list-item">
      <a class="navigation-menu__list-item-link" href="#">Home</a>
    </li>
    <li class="navigation-menu__list-item navigation-menu__list-item--active">
      <a class="navigation-menu__list-item-link" href="#">About</a>
    </li>
  </ul>
</nav>

In this example, the block is the navigation-menu, and its elements and modifiers are clearly defined, making it easy to understand and style.

Article Card


<article class="article-card">
  <header class="article-card__header">
    <h2 class="article-card__title">An Exciting Blog Post</h2>
  </header>
  <div class="article-card__content">
    <p class="article-card__content-paragraph">...</p>
  </div>
  <footer class="article-card__footer article-card__footer--featured">
    <a class="article-card__footer-link" href="#">Read More</a>
  </footer>
</article>

In this example, the article-card block contains elements like header, content, and footer. The footer block also has a modifier indicating that it's featured.

Enhancing HTML Element Selection

By adhering to BEM methodology, you not only improve naming conventions for CSS but also enhance HTML element selection. This structured approach to naming classes makes it easier to target specific elements when applying styles.

CSS Properties and Background Colors

CSS properties and background colors become more manageable with BEM. You can quickly identify and update styles for individual elements, maintaining consistency throughout your web page.

In Conclusion

Incorporating BEM methodology into your HTML class naming conventions not only enhances CSS naming conventions but also improves the overall quality of your code. The structured approach ensures that your codebase remains clean, organized, and easily understandable. By adopting these practices, you can create web pages that are more maintainable, collaborative, and scalable, promoting a seamless web development experience.

Embrace BEM and watch your HTML and CSS codebase flourish, all while adhering to effective naming conventions for your HTML elements and CSS selectors.

For further reading on CSS and HTML best practices, consider checking out these additional resources:

These references will provide you with comprehensive insights into web development best practices, ensuring you're equipped with the knowledge to create outstanding web pages.

If you're looking for more examples and guidelines for BEM class name you can find it on my snippet page about Common CSS Class Names.

Share it: