As we know, in most programming languages nowadays there are some common naming conventions, such as:

  • Camel Case (Ex: firstName and lastName)
  • Snake Case (Ex: first_name and last_name)
  • Kebab Case (Ex: first-name and last-name)
  • Pascal Case (Ex: FirstName and LastName)

So are there any naming rules in CSS?

We have BEM, so let's find out what BEM is in the next part of this post.

1. What is BEM?

The B in "BEM" stands for "Block".

The E in "BEM" stands for "Elements".

The M in "BEM" stands for "Modifiers".

BEM is a naming convention for HTML and CSS classes that helps developers create maintainable and organized code. It provides a structured format for naming the HTML and CSS classes (block, elements, and modifiers components)

2. Benefits of BEM

Class naming has never been an easy part of CSS. But by using the BEM naming convention, this challenge becomes easy.

Here are a few reasons for you to consider using the BEM:

  • Clarity

BEM makes cleaner CSS code and makes it easy to understand and maintain.

  • Reusability

When using the BEM, you will have a friendly structure that will not be confused with other CSS blocks. Thereby it makes reuse easier.

  • Developer-Friendly

Naming CSS classes is intuitive and easy to understand, helping developers easily understand the code and help each other during the repair or further development process.

  • Maintainability

BEM provides a clear structure for each block that facilitates changing a specific element of a website without affecting the style of other blocks. Thereby maintenance becomes easier and takes less time.

3. How It Works?

A BEM class name includes up to three parts:

  • Block

The outermost parent element of the component is defined as the block.

  • Element

Inside of the component may be one or more children called elements.

  • Modifier

Either a block or element may have a variation signified by a modifier.

If all three are used in a name it would look something like this:

[block]__[element]--[modifier]

After that brief introduction, let's look at some specific examples.

Example 1: Using the BEM naming convention to indicate [block]__[element]

The person has a head, two arms, and feet.

Using the BEM, it would look something like this:

In HTML code:

In CSS code:

In SCSS code (Recommend):

Through example 1, we learned how to use BEM to represent [Block]__[Element].

To fully demonstrate [Block]__[Element]--[Modifier], let's continue with example 2 below.

Example 2: Using the BEM naming convention to indicate [block]__[element]--[modifier]

There are two persons, person A has a blue head and person B has a red head.

Using the BEM, it would look something like this:

In HTML code:

In CSS code:

In SCSS code (Recommend):

Through the two examples above, we know how to use BEM in CSS.

Within the scope of this post, my purpose is to introduce BEM to you.

To better understand BEM, you can refer to some other post about it on the internet.

4. When should we use BEM?

  • Large-Scale Projects

When you have a project with a large code base, consists of multiple developers building different parts of the project. Without standard CSS class naming, you'll have a CSS mess. It's very bad when someone on the team changes or further develops someone else's code. That's when you and your team should use BEM, it makes it easier to maintain projects and reduces the risk of errors and code conflicts.

  • Accessibility-focused projects

When you need to develop a website that prioritizes user access and search engine optimization (SEO). With BEM, your plan will be easier to implement.

5. Conclusion

In this post, we have explored the BEM naming convention of CSS and how it can be used in a Web application. BEM helps build robust and performant applications of any design complexity with less code.

If you are not using BEM currently, I highly recommend it for your next project. BEM naming convention will be a great trend, helping to save time and effort.

Thank you for reading!

 

[Reference Source]

  1. https://www.devbridge.com/articles/implementing-clean-css-bem-method/
  2. https://www.geeksforgeeks.org/understanding-the-css-bem-convention/
  3. https://blog.openreplay.com/writing-cleaner-css-code-with-bem/
  4. https://images.pexels.com/photos/14553707/pexels-photo-14553707.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1