Skip to main content

BEM - Overview and Usability

BEM Methodology is a new pathway to naming convention in HTML & CSS. Its an approach towards unified language, using three powerful entities - Block, Elements and Modifiers, which can be used to produce leading standards for industrial web services.

Why BEM?

You must have wondered, why should we use BEM when there are so many ways to use naming conventions in CSS, or you already have your own standards?! Things can be surely attained in various ways but ultimately what makes difference is its usability and effectiveness.

Some considerable advantages of BEM are:

  1. Reuse code base (as its component based)
  2. Avoid structural dependencies (by using only class names)
  3. Avoid too many comments in CSS files (helping in optimization)
  4. Simplifying refactoring of large files or sites
  5. Maintains consistency, hence semantic, across the site in forms of independent blocks & styles
  6. Less KT sessions as its self explanatory
  7. Independent from any library or APIs

Basics of  BEM:

It simply is all about naming and styling for blocks, elements and their modifiers if any. It is a component-driven way to name blocks or elements in the website. There is an interesting story behind BEM discovery here in this article.
Block is an independent entity. It comprises of elements and/or blocks inside it. Block can consists of multiple blocks. Block coincides with class (not ID) name like,

<nav class="navigation">

Blocks can be given a unique class name either as a single word or if required, using a prefix separated with a single dash (-) symbol. For instance,

<nav class="head-navigation">

Example: Table or navigation is Block, a separate component of a web page.

Blocks inside block: Logo/navigation inside Header is a block inside its parent block that is Header.

Element is either a child, descendant, part of block or sub items inside block.
Example: Cells, rows in a table are elements. Navigation items  are elements of navigation (nav) block. These should be uniquely named too as,

<nav class="navigation__item">

Element can be separated from its parent by double underscore (__) like navigation__item

Modifier is to represent a state or specific properties of elements or block. Modifiers are denoted using double dash (--) after the element or block such as navigation__item--active

<nav class="navigation__item--active">

Usage and Example:

Lets take a simple example of "Button" which acts as either "Block" or "Element" here.
Above screen shows "button" styled with blue background-color. Note that it uses generic elements as styling entities. Now, when we want to apply any other  background-color to just few buttons in future, retaining original blue color, we have to, in one way, overwrite it with appending a specific class name.

Drawbacks: This is a bad practice as known to all web devs. Also it is not a standard method. It complicates CSS code making it messy later on and hard to find or maintain for any resource using it.

Now let's analyse below scenario:

This shows button is styled with a class name .button.

Rest of the color properties are styled using various modifiers as --primary or --secondary.
This makes easy to identify styles, blocks easily in CSS as well as in HTML. Thus making naming methods more meaningful and semantic. 

However, this needs practice. There are some cases where devs might get confused whether to use block or element, or how to handle grandchildren of a parent block!

To summarize, BEM helps in reducing or almost eradicating cascades in CSS as every BEM class is a separate and self-centered chunk of styles. Moreover, its not just limited to CSS naming but can be widely used in any front end technology like XML, HTML or JavaScript, irrespective of any framework, if used on the site.

For more detail, documentation and examples refer BEM site.