BEM is a front-end project development methodology developed by Yandex.

The name BEM is derived from the first letters of the three components of the methodology: Block, Element, and Modifier.

An example article of a component command specification using BEM is recommended here: BEM Naming Cheat Sheet by 9Elements.

It describes the structure and command examples of several components, including: bread crumbs, buttons, cards, lists, navigation, layouts, form controls, and so on.

What is CSS BEM?

BEM (Block Element Modifier) method is a naming convention for CSS classes, designed to solve the scope problem by defining a namespace to make CSS more maintainable.

It is recommended in principle to name individual CSS classes and, when hierarchies are needed, to include them in the naming, which naturally makes the selectors efficient and easy to override.

  • A block is a separate component that can be reused in a project and acts as a “namespace” for its child components (elements).
  • Use the modifier as a marker when a block or element is in a particular state or structure or style.

BEM naming convention

  • blockRepresents a higher level of abstraction or component.
  • block__elementOn behalf of.blockProgeny, used to form a complete.blockAs a whole.
  • block--modifierOn behalf of.blockDifferent states or versions of.
.block {}
.block__element {}
.block--modifier {}
Copy the code

The sample

  • BEM entity names are all lowercase letters or numbers. Using a single hyphen (-).
  • BEM element names and block names are separated by two underscores (__).
  • The BEM modifier is preceded by a hyphen (--) to separate.
<ul class="menu">
  <li class="menu__item menu__item--selected">Item 1</li>
  <li class="menu__item">Item 2</li>
  <li class="menu__item">Item 3</li>
</ul>
Copy the code

CSS is as follows:

.menu {
  list-style: none;
}

.menu__item {
  font-weight: bold;
}

.menu__item--selected {
  color: plum;
}
Copy the code

Analysis of the

  • .menuEncapsulating a separate entity makes sense on its own. While blocks can be nested and interact with each other, they are semantically equivalent; There is no priority or hierarchy.
  • .menu__itemA part of a block that has no independent meaning. Any element is semantically associated with its block.
  • .menu__item--selectedA modifier on a block or element. Use them to change appearance, behavior, or state.

Benefits of the BEM naming convention

The advantage of BEM is that the generated CSS class names use only one category selector, which can avoid the complex attribute cascading problem caused by the nesting of multiple category selectors in traditional practice.

In other words, all of its style rules have the same specificity, thus there is no complex priority problem and the cascade rule is simplified. If you don’t already know much about specificity, check out the previous article on CSS inheritance, cascading, and specificity.

After subdivision, it can be understood from three parts: modularity, reusability and structure:

  • Modularity: Block styles never depend on other elements on the page, so you’ll never have problems with cascading.
  • Reusability: Composing separate blocks in different ways and reusing them in a smart way reduces the amount of CSS code that must be maintained.
  • Structure: The BEM approach provides a solid structure to your CSS code, keeping the structure simple and easy to understand.

Other naming conventions

In addition to BEM, there are other common naming conventions such as OOCSS and SMACSS.

OOCSS

OOCSS stands for Object Oriented CSS (OOCSS), which is a practice of applying object-oriented methodology to the organization and management of CSS code

There are two important principles of OOCSS

  • The first principle is to separate structure from appearance.
  • The second principle is to separate the container from the content.

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS.

SMACSS divides CSS style rules into several different categories:

  • Basic: This category contains the default CSS styles. Serve as a basis for other styles.
  • Layout: This category contains CSS styles related to the layout of the page, which are used to arrange the modules.
  • Modules: This category contains CSS styles for reusable modules.
  • States: CSS styles in this category are used to describe how layouts and modules look in different states. For example, the layout changes with different screen sizes. Each TAB of a tabbed module can have a show or hide state.
  • Theme: This category is similar to states, except that it is used to change the layout and visual appearance of the module.

Further Reading

  • What do you think of BEM naming in CSS?
  • BEMIT: Taking the BEM Naming Convention a Step Further