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 effective malta mobile numbers list 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 -:
The element name starts with a double underscore __:
The modifier name starts with an underscore _:
There is only one very critical rule in the BEM methodology: a modifier cannot be used outside the context of its element.
BEM in practice
Since you are already familiar with nomenclatures, let's see the BEM methodology in practice. Let's say you have this HTML code in action:
With the following CSS applied:
Now, don't be fooled. In the example so far we almost always had a block, an element and a modifier, which doesn't always have to be the case.
For example, let's say we have a block called person. A person has legs and arms, and can also be a woman or a man. If we want to define a male person with a right hand, it will look like this:
Now you can see the true meaning of the BEM. We define a person whose modifier is a gender. Since it doesn't matter if a person is male or female, they have one hand and the hand is an element. And again, every person can have a right or left hand, which again is a modifier.
Otherwise, if we want to define a general person with only one hand, we will do it like this:
As you can see, once you get comfortable with BEM, it is very easy to structure your CSS and HTML structure with it.
Advantages and disadvantages of BEM
Advantages
BEM is great for maintenance. How many times have you had to work behind someone on a large scale project and you are too afraid to change something without causing something unknown to break? By using BEM, you know the exact purpose of the item and in which block it can appear.
Class names are logical and intuitive, and every team member knows what that element does on the website. BEM gives everyone on a project a declarative syntax they can share so they're on the same page.
BEM does away with nested CSS selectors. Every HTML element has its own CSS class and you know from its name what its purpose is. One selector to rule them all.
Disadvantages
Don't go too deep into nesting. The main rule should be to use no more than two levels of parent and child.
Be careful where your block scope starts. A common mistake here is when a developer uses a block, but doesn't realize that at a later point in development that same block will have a parent block, possibly breaking the nesting rule.
Conclusion
The BEM methodology has greatly improved maintainability in web projects and I can safely say that every developer who is going to be “introduced” to the BEM-based project will very quickly get up to speed with the entire code structure.