Guest Post: Introduction To BEM Methodology

This week’s blog is our second installment from our new guest blogging program with Toptal, a widely touted placement agency for talented freelance developers!  Today’s blog comes courtesy of Tomislav Matijević, and can be found over on toptal.com.

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.

Today, there are plenty of methodologies with the aim of reducing CSS code and making your CSS code more maintainable. In this article, I am going to explain and provide a few examples of one of them: BEM. BEM stands for Block Element Modifier. The main idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules. If you ever saw a class name like header__form--search, that is BEM in action. Yes, classes can be named very long, but they are all readable and understandable.

Note that the best practice is to use BEM only with classes, and not IDs because classes allow you to repeat names if necessary and create more consistent coding structure. Also, if you want to break your website into organized modules, it should consist of the same structure: block, element, and modifier. Where each block can have multiple elements, and both block and elements can have multiple modifiers. However, let’s first start with the basic BEM structure and explain it with examples.

A block represents an object in your website. Think of it as bigger structural chunks of your code. Most common blocks on every website today are header, content, sidebar, footer, and search. Blocks in BEM are always a starting point of chaining your CSS classes on to. Take a look at a few block examples:

• a content
• a menu
• a search form

.content {/* Styles */}
.menu {/* Styles */}
.search {/* Styles */}

An element is a component within the block that performs a particular function. It should only make sense in the context of its block:

• a content article
• a menu item
• a search input field

.content__article {/* Styles */}
.menu__item {/* Styles */}
.search__input {/* Styles */}