BEM Methodology : Introduction

BEM stands for Block Element Modifier.

Blocks, elements, and modifiers are all called BEM entities.

It is a notion that can be used both to refer to an individual BEM entity and as a generic term for blocks, elements, and modifiers.

BEM methodology was invented at Yandex to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components. (Source)

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 scale, 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.

BEM Methodology will substantial improve code maintainability and speed up the development process

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.

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 Read more…

Advertisements