Hands-On UX Design for Developers

Block, Element, Modifier (BEM)

This approach was first introduced by Yandex in 2010, and the focus of this CSS methodology approach is to identify three main components of CSS: block, elements, and modifiers.

The main idea behind this CSS methodology is to divide user interface components into small pieces and independents blocks.

For example, a block inside this CSS methodology can be a FORM that we create into a HTML page, and the elements are the small parts which can be included inside the form, such as BUTTONS or INPUTS.

A modifier inside this approach is usually referred to as an entity defining the behavior, appearance, or the state of a block or an element.

The BEM CSS methodology approach is really easy to get started with and understand ...