
<Image src="html.jpg" alt="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](https://www.educative.io/answers/what-is-a-css-class-naming-convention) (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](https://en.bem.info/methodology/naming-convention/). It provides a structured
and consistent approach to [naming](https://getbem.com/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.

```html

<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.

```html

<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.

```html

<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:

#### Navigation Menu

```html

<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

```html

<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:

- [CSS Naming Conventions on MakeUseOf](https://www.makeuseof.com/css-class-and-id-best-naming-practices/)
- [FreeCodeCamp's CSS Naming Conventions Guide](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/)
- [Scaler's CSS Class Naming Convention Article](https://www.scaler.com/topics/css-class-naming-convention/)
- [StackOverflow Discussion on CSS Class Naming Conventions](https://stackoverflow.com/questions/7927193/css-class-naming-convention)
- [HackerNoon's Article on CSS Organization and Naming Conventions](https://hackernoon.com/best-practice-in-css-organisation-and-naming-conventions-4d103ujy)
- [Dev.to Article on CSS Naming Conventions](https://dev.to/ziizium/css-naming-conventions-5gd6)
- [LinkedIn Discussion on HTML Class and ID Naming](https://www.linkedin.com/advice/1/how-do-you-name-html-classes-ids-skills-html)

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](/snippets/bem-classes).


Discover the art of crafting clean and organized HTML class names while enhancing CSS naming conventions. Learn how to create maintainable, scalable, and SEO-friendly code with the latest best practices.

Mastering HTML Class Naming: Boosting CSS Efficiency


<Image src="grid.jpeg" alt="Don't forget to specify alt" />

Often in the life of a web developer, you need to make a grid, but the limitations of the browser (Internet Explorer 😭)
do not allow you to use, for example, [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

This is
where [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
comes to the rescue. He is our friend, brother and helper. 🫡

This post is about how to create a flexbox-based grid component in React. The component should be reusable and painless
to configure.

## Preparation

Many of those who created components in React are familiar with
the [classnames](https://www.npmjs.com/package/classnames) library, but I want to recommend you the
[clsx](https://www.npmjs.com/package/clsx) library, which is smaller and similar in functionality.

It is not necessary for our component, but it is more comfortable with them:

```shell
npm i clsx
```

## Step 1: Create React component architecture

```jsx
const Grid = ({ children }) => (
  <div className='grid'>
    {children}
  </div>
);
```

```jsx
const GridColumn = ({ children }) => (
  <div className='grid__col'>
    {children}
  </div>
);
```

```jsx
const GridRow = ({ children }) => (
  <div className='grid__row'>
    {children}
  </div>
);
```

## Step 2: Create styles with SCSS

I use the [BEM](https://en.bem.info/methodology/) methodology for styles, as I think it is excellent for component
libraries.

```scss
// Base styles
.grid {
  width: 100%;

  &__row {
    display: flex;
    flex-wrap: wrap;
  }

  &__col {
    flex-grow: 1;
    flex-shrink: 0;

    // For decoration only
    background-color: #bbeffd;
    border: 1px solid #61dafb;
    padding: 15px;
    text-align: center;
    margin-bottom: 25px;
  }
}
```

What about columns logic?

```scss
.grid__row--col-3 > .grid__col {
  width: 33%;
}

.grid__row--col-2 > .grid__col {
  width: 50%;
}
```

It is so ugly. Why we need to do it manually?

Let's try some [Sass](https://sass-lang.com/documentation/at-rules/control/each) magic 🪄?

```scss
$columnsNumberToWidth: (
  2: 50%,
  3: 33%,
  4: 25%,
  5: 20%,
  6: 16.6%,
);

@each $number, $width in $columnsNumberToWidth {
  .grid__row--col-#{$number} > .grid__col {
    width: $width;
  }
}
```

You can see how SASS code is transformed into CSS [here](https://www.sassmeister.com/):

<Image src="sass.jpeg" alt="sassmeister site screenshot" />

## Step 3: Add logic to the GridRow component.

```jsx
import clsx from 'clsx';

const GridRow = (pops) => {
  const {
    children,
    columns,
  } = props;

  const rootClasses = clsx('grid__row', {
    [`grid__row--col-${columns}`]: columns,
  });

  return (
    <div className={rootClasses}>
      {children}
    </div>
  );
};
```

## Let's check result

```jsx
<Grid>
  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
  </GridRow>

  <GridRow columns={6}>
    <GridColumn>1 of 6</GridColumn>
    <GridColumn>2 of 6</GridColumn>
    <GridColumn>3 of 6</GridColumn>
    <GridColumn>4 of 6</GridColumn>
    <GridColumn>5 of 6</GridColumn>
    <GridColumn>6 of 6</GridColumn>
  </GridRow>

  {/* ...  */}
</Grid>
```

<Image src="example-1.jpeg" alt="First example grid screenshot" />

## Recap

Writing components has an endless process ♾.

Next, you can add a dynamic size of each column, column gaps, change the component tag type, breakpoints and so on...

Therefore, below I share additional materials that may be useful:

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox Froggy Game](https://flexboxfroggy.com/)
- [React bootstrap Grid system](https://react-bootstrap.github.io/docs/layout/grid)




Creating a flexbox-based Grid component with BEM methodology and clsx

Tutorial: How to create a grid with flexbox in React

The CSS category page is a hub for all things related to CSS. Discover tips, tricks, tutorials, and more to level up your skills.

CSS2 articles

Articles

Mastering HTML Class Naming: Boosting CSS Efficiency

Tutorial: How to create a grid with flexbox in React