The name of a BEM entity is unique. The same BEM entity always has the same name in all technologies (CSS, JavaScript, and HTML). The primary purpose of the naming convention is to give names meaning so that they are as informative as possible for the developer.
Compare the same name for a CSS selector that is written in different ways:
menuitemvisible
menu-item-visible
menuItemVisible
To understand the meaning of the first name, you need read through each word carefully. In the last two examples, the name is clearly divided into its parts. But none of these names helps us understand that menu is a block, item is an element, and visible is a modifier. The rules for naming BEM entities were developed in order to make entity names unambiguous and easy to understand.
Naming rules
block-name__elem-name_mod-name_mod-val
Names are written in lowercase Latin letters.
Words are separated by a hyphen (-).
The block name defines the namespace for its elements and modifiers.
The element name is separated from the block name by a double underscore (__).
The modifier name is separated from the block or element name by a single underscore (_).
The modifier value is separated from the modifier name by a single underscore (_).
For boolean modifiers, the value is not included in the name.
Important: Elements of elements do not exist in the BEM methodology. The naming rules do not allow creating elements of elements, but you can nest elements inside each other in the DOM tree.
Examples
In HTML, BEM entities are represented by the class attribute. In BEM, for any of the technologies, there is a call to the class:
Examples of the naming rules are applied to CSS.
Block name
menu
Why don't block names need prefixes?
HTML
<div class="menu">...</div>
CSS
.menu { color: red; }Element name
menu__item
Important: Identical elements in the same block have the same names. For example, all menu items in the menu block are called menu__item.
HTML
<div class="menu"> ... <span class="menu__item"></span></div>
CSS
.menu__item { color: red; }Block modifier name
menu_hidden
menu_theme_islands
HTML
<div class="menu menu_hidden"> ... </div><div class="menu menu_theme_islands"> ... </div>
CSS
.menu_hidden { display: none; }.menu_theme_islands { color: green; }Element modifier name
menu__item_visible
menu__item_type_radio
HTML
<div class="menu"> ... <span class="menu__item menu__item_visible menu__item_type_radio"> ... </span></div>
CSS
.menu__item_visible {}.menu__item_type_radio { color: blue; }Alternative naming schemes
The naming rules above describe the classic approach to naming BEM entities. All BEM tools follow the classic naming scheme by default.
There are alternative solutions that are actively used in the BEM community. To have all technologies apply identical names that were created using alternative naming schemes, use the bem-naming tool. By default, bem-naming is configured to use the methodology's standard naming convention, but it allows you to add rules so you can use alternative schemes.
Two Dashes style
block-name__elem-name--mod-name--mod-val
Names are written in lowercase Latin letters.
Words within the names of BEM entities are separated by a hyphen (-).
The element name is separated from the block name by a double underscore (__).
Boolean modifiers are separated from the name of the block or element by a double hyphen (--).
The value of a modifier is separated from its name by a double hyphen (--).
Important: A double hyphen inside a comment (--) may cause an error during validation of an HTML document.
CamelCase style
blockName-elemName_modName_modVal
Names are written in Latin letters.
Each word inside a name begins with an uppercase letter.
The separators for names of blocks, elements, and modifiers are the same as in the standard scheme.
React style
BlockName-ElemName_modName_modVal
Names are written in Latin letters.
Names of blocks and elements begin with an uppercase letter. Names of modifiers begin with a lowercase letter.
Each word inside a name begins with an uppercase letter.
An element name is separated from the block name by a single hyphen (-).
The separators between names and values of modifiers are the same as in the standard scheme.
No Namespace style
_available
This naming scheme limits the use of mixes, because it makes it impossible to determine which block or element a modifier belongs to.
Your naming system
You can create your own custom naming solution for BEM entities. The most important thing is that your new naming system makes it possible to programmatically separate blocks from elements and modifiers.
FAQs
The name of a BEM entity is unique. The same BEM entity always has the same name in all technologies (CSS, JavaScript, and HTML). The primary purpose of the naming convention is to give names meaning so that they are as informative as possible for the developer.
What is BEM and how do you use it? ›
BEM, short for Block Element Modifier, is a popular CSS methodology that simplifies the process of writing CSS code. By breaking down styles into blocks, elements, and modifiers, BEM makes it easier to understand and manipulate your CSS code.
What is BEM in HTML class name convention? ›
BEM (Block, Element, Modifier) is a naming convention for classes in HTML and CSS what was developed by Yandex. Basically, it is a methodology to help you understand better what is going on between you HTML and CSS and styling it better.
What does BEM mean in HTML? ›
BEM stands for Block Element Modifier. The main idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules. If you ever saw a class name like header__form--search , that is BEM in action.
What is the naming convention of interface methods? ›
Interface names should be adjectives. They should end with “able” or “ible” whenever the interface provides a capability; otherwise, they should be nouns. Interface names follow the same capitalization convention as class names: public interface Serializable {...} public interface SystemPanel {...}
Who created the BEM methodology? ›
BEM is a naming convention for HTML and CSS classes. The methodology was developed by Yandex in order to better connect the HTML and CSS files and make developers be more descriptive with their class names.
What are the disadvantages of BEM? ›
Disadvantages of BEM:
- Verbosity: The BEM naming convention can result in longer class names that can make the HTML code more verbose and difficult to read.
- Overhead: Implementing BEM requires a significant amount of upfront work and planning, which can be a burden for small projects or teams with limited resources.
The pros for using BEM are as follows: Better CSS performance – this is due to less CSS nesting making it quicker for browsers to render. Less CSS conflicts due to the naming conventions.
How do you implement BEM? ›
Steps to implement BEM:
- Start by defining the block: A block should be represented by a single CSS class and should be prefixed with the block name, such as “header”, “button”, or “form”.
- Identify the elements within the block: The elements are the parts of the block that make it up.
Valid BEM Class Naming
Names are written in lowercase Latin letters. Words are separated by a hyphen -. The block name defines the namespace for its elements and modifiers. The element name is separated from the block name by a double underscore __.
A modifier is a flag that changes how a block or an element looks or behaves. For example: The two buttons are the same block, but they look different. The power BEM gives us lets us use the same block twice and still have them look very different.
What is a naming convention for code? ›
One-character variable names should be avoided except for temporary "throwaway" variables. Common names for temporary variables are i, j, k, m, and n for integers; c, d, and e for characters. Constants should be written in uppercase characters separated by underscores.
What is the BEM naming convention for CSS? ›
BEM is a popular naming convention for CSS classes that aims to make it easier to understand the structure and purpose of different elements on a web page. It was created by the developers at Yandex, a Russian search engine company, and has since been widely adopted by web developers around the world.
What is BEM after a name? ›
British Empire Medal ( BEM )
Awarded for a 'hands-on' service to the local community. This could be a long-term charitable or voluntary activity, or innovative work of a relatively short duration (3 to 4 years) that has made a significant difference.
What is Sass and BEM? ›
SASS nesting and the BEM (Block - Element - Modifier) structure will help get us to get rid of this concern. This is a method that consists of naming your CSS classes based on the role they play in your HTML. The Block Element Modifier structure is a powerful structure to follow when naming our classes.
What is the BEM naming convention in Angular? ›
Ignite UI for Angular uses the Two Dashes style of the BEM naming convention for CSS classes. Names are written in lower case. Words within the names of BEM entities are separated by a hyphen (-). An element name is separated from a block name by a double underscore (__).
What is the BEM naming convention in Webflow? ›
The BEM (Block, Element, Modifier) naming convention is a widely used methodology for structuring CSS class names. It breaks down the user interface into blocks (standalone components), elements (parts within blocks), and modifiers (variations or states).
What is BEM methodology in Angular? ›
BEM (Block-Element-Modifier) is a CSS naming methodology that attempts to speed up and simplify web development by dividing the user interface into separate blocks. You might wonder if it is still necessary to use BEM since Angular allows scoped styling.
What is BEM in architecture? ›
Whole-Building Energy Modeling (BEM) is a versatile, multipurpose tool that is used in new building and retrofit design, code compliance, green certification, qualification for tax credits and utility incentives, and real-time building control.
