BEM (Block, Element, Modifier) is a popular naming convention for CSS class names. It’s a methodology that helps to write clean and reusable CSS code, making it easier to maintain and scale.

The main idea behind BEM is to break down a web page into small, reusable components, called “blocks”. Each block can contain one or more “elements”, which are the parts that make up the block. Finally, each element can have its own set of “modifiers”, which are used to change its appearance or behavior.

The naming convention in BEM follows a strict pattern. Blocks are named using a descriptive term, such as “header” or “menu”. Elements are named using the block name, followed by two underscores and a descriptive term, such as “header__logo” or “menu__item”. Modifiers are named using the element name, followed by two hyphens and a descriptive term, such as “header__logo–small” or “menu__item–active”.

Using BEM can help to make your CSS code more readable, scalable, and easier to maintain. By breaking down your page into reusable components, you can easily update and modify the code without affecting other parts of the page.

If you’re interested in learning more about BEM, check out the official BEM website at or this article with examples at