BEM: A Class Naming Convention

Why do we need a naming convention?

When working on projects and developing extensive web applications, the codebase can become massive in no time. It then becomes daunting to look for an error or a helpful function/class. Soon enough, it feels like we are looking for a needle in a haystack. To avoid this, we need to stick to strict naming conventions.

Naming conventions make our code more readable, organized, and searchable. BEM is a protocol that exists for naming CSS classes.

What Is BEM Methodology?

When you are building smaller websites, how you organize your styles is usually not a big problem. You create your usual files, write all the needed CSS, and that’s all. However, when it comes to larger, more complex projects, how you organize your code becomes crucial. How the code is structured is even more important if you are working in a team consisting of multiple front-end and back-end developers.

The primary purpose of BEM methodology is to make names of CSS selectors as informative and transparent as possible.

About BEM

BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.

BEM also aims to write independent CSS blocks in order to reuse them later in your project.

Why BEM

BEM naming provides three specific benefits:

1. Modularity

Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.

You also get the ability to transfer blocks from your finished projects to new ones.

2. Reusability

Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.

With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.

3. Structure

BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

How It Works

The BEM protocol is divided into three components:

  1. Block: The outermost parent element of the component is defined as the block.
  2. Element: Inside of the component may be one or more children called elements.
  3. Modifier: Either a block or element may have a variation signified by a modifier.

If all three are used in a name it would look something like this:

[block]__[element]--[modifier]

Block

Blocks is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks).

Blocks are named with a hyphen in between. This maintains consistency with general CSS property names.

Take a look at a few block examples:

  • a content
  • a menu
  • a search form
{block name}

Element

An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block that they belong to.

Take a look at a few element examples:

  • a content article
  • a menu item
  • a search input field
{block name} + __ + {element name}

Modifier

A modifier is how we represent the variations of a block. If you’ve ever used Bootstrap, then the best example would be the button sizes. Button sizes are just size variations of the button itself, which makes it the modifier:

Take a look at a few modifier examples:

  • a content featured article
  • a menu link
  • a search field with or without icon
{block name} + __ + {element name} + -- + {modifier name}

Reference

Thanks for reading.

--

--

--

FrontEnd developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Sinatra Project

Use FastAPI for Better Machine Learning in Production

Microsoft Intelligent Azure Cognitive Services Data — Text Translation Service

April 2021 — Terra Virtua Developer Update

Learning to Code? Try Programming Hub with Edvicon International

SolidRun HoneyComb/Clearfog ARM Workstation Up-and-running

Picoctf2022 Forensics Writeups

How I prepared AWS Solutions Architect-Associate and passed with 900+ score on first try

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vivek Kumar

Vivek Kumar

FrontEnd developer

More from Medium

CSS Grid: fr unit — basics

Block Elements vs Inline Elements

SCSS @Mixins

Changing my perspective towards CSS!