What is BEM methodology in CSS?

BEM (Block, Element, Modifier) methodology is a modular CSS approach that falls under the category of CSS methodologies. These are techniques for organizing and structuring your CSS code. It was initially conceived by the Russian tech company Yandex and gained traction among American and Western-European web developers .

The BEM is the componentisation of your HTML and CSS code. It organises components into three types :

1. Blocks: They are standalone entities  are meaningful on their own . Examples include header, container, menu, checkbox, and textbox . The goal is that Block styles should never be dependent on other elements on a page . Blocks should have simple, short names and ideally avoid the _ or – characters (though these characters are used in the naming conventions for Elements and Modifiers) .
2. Elements: There are parts of Blocks that have no standalone meaning and are semantically tied to their Blocks . Examples include menu item, list item, checkbox caption, and header title. When styling elements, you use selectors in the format blockname__elementname.
3. Modifiers: These act as flags on a Block or Element to change its appearance or behavior. Examples include disabled, highlighted, checked, fixed, size big, and color yellow. When styling modifiers, you use selectors in the format blockname–modifiername and blockname__elementname–modifiername. This double-hyphen notation has been popularized by BEM. Blocks or Elements with modifiers should inherit everything from the base Block or Element, except for the specific properties the modifier is intended to change.

The overall objective of BEM is to optimize the readability, maintainability, and flexibility of your CSS code.

Code Examples:

CSS Selectors:
.form { }                       /* Block */
.form--theme-xmas { }           /* Block + modifier */
.form--simple { }               /* Block + modifier */
.form__input { }                /* Block > element */
.form__submit { }               /* Block > element */
.form__submit--disabled { }     /* Block > element + modifier */
Corresponding HTML:
<form>
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

In the above example shows a form Block, with input and submit Elements within it. The submit element also has a disabled Modifier. The Block itself can also have Modifiers, such as theme-xmas or simple.

Code Examples:

For example, defining styles for a message block might look like this:

.message { /* styles for the base message block */ }

A modifier for the message, like a “success” variant, would follow the blockname–modifiername format:

.message--success { /* styles that modify the base message for success state */ }

An example illustrating a modified element’s selector is shown with a “Media module” and a “right variant”:

.media--right img { /* styles for the image element within a media block that has the right modifier */ }

This targets the img element within the block when the block has the .media–right modifier class.

Utility classes, also discussed in the context of modular CSS, are simple classes often named after what they do. Examples provided include:

.text-center { text-align: center; }
.float-left { float: left; }
.clearfix { /* clearfix styles */ }
.hidden { display: none; }

BEM is listed among other CSS methodologies like OOCSS, SMACSS, and ITCSS. These methodologies emerged as developers sought ways to scale CSS for large projects, creating prescribed guidelines for code reuse and reducing bugs. They provide a structure for organizing CSS, although they typically don’t come with a library or technology. Using naming conventions like double-hyphens and double-underscores can help make the structure of modules easier to understand at a glance. These methodologies can complement one another.

CSS3 Topics