What is BEM Methodology?
Posted: Sat Jan 25, 2025 9:40 am
That is why in this article I want to introduce you to the BEM methodology and explain how this CSS practice can greatly improve code maintainability, speed up the development process and streamline developer teamwork by organizing CSS classes into independent modules.
When you're building smaller websites, how you organize styles isn't usually a big deal. You create your usual files, write all the necessary CSS, and that's it. However, when it comes to larger, more complex projects, how you organize code becomes crucial. The way your code is structured is even more important if you're working on a team effective malta mobile numbers list consisting of multiple front-end and back-end developers.
Nowadays, there are many methodologies with the aim of reducing CSS code and making your CSS code easier to maintain. In this article, I am going to focus mainly on the BEM methodology . BEM stands for Blocking Element Modifier. The main idea behind it is to speed up the development process and facilitate teamwork of developers by organizing CSS classes into independent modules.
Please note that the best practice is to use BEM only with classes and not with IDs, because classes allow you to repeat names if needed and create a more consistent coding structure. Also, if you want to divide the website into organized modules, it should have 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 start with the basic structure of BEM first.
Basic structure of BEM
Block
A block represents an object on your website. Think of them as larger structural chunks of your code. The most common blocks on every website today are the header, content, sidebar, footer, and search. Blocks in BEM are always a starting point for chaining your CSS classes together.
Element
An element is a component within the block that performs a particular function. It should only make sense in the context of the block:
Modifier
A modifier is how we represent variations of a block. If you've ever used Bootstrap, the best example would be button sizes. Button sizes are just size variations of the button itself, which makes it the modifier:
Names
The main goal of the BEM methodology is to make CSS selector names as informative and transparent as possible. The original BEM style is defined this way:
The block name is usually a single word “.header”, but if you have a longer block definition, it is split with a single dash -:
When you're building smaller websites, how you organize styles isn't usually a big deal. You create your usual files, write all the necessary CSS, and that's it. However, when it comes to larger, more complex projects, how you organize code becomes crucial. The way your code is structured is even more important if you're working on a team effective malta mobile numbers list consisting of multiple front-end and back-end developers.
Nowadays, there are many methodologies with the aim of reducing CSS code and making your CSS code easier to maintain. In this article, I am going to focus mainly on the BEM methodology . BEM stands for Blocking Element Modifier. The main idea behind it is to speed up the development process and facilitate teamwork of developers by organizing CSS classes into independent modules.
Please note that the best practice is to use BEM only with classes and not with IDs, because classes allow you to repeat names if needed and create a more consistent coding structure. Also, if you want to divide the website into organized modules, it should have 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 start with the basic structure of BEM first.
Basic structure of BEM
Block
A block represents an object on your website. Think of them as larger structural chunks of your code. The most common blocks on every website today are the header, content, sidebar, footer, and search. Blocks in BEM are always a starting point for chaining your CSS classes together.
Element
An element is a component within the block that performs a particular function. It should only make sense in the context of the block:
Modifier
A modifier is how we represent variations of a block. If you've ever used Bootstrap, the best example would be button sizes. Button sizes are just size variations of the button itself, which makes it the modifier:
Names
The main goal of the BEM methodology is to make CSS selector names as informative and transparent as possible. The original BEM style is defined this way:
The block name is usually a single word “.header”, but if you have a longer block definition, it is split with a single dash -: