A quick guide about What is the B.E.M. Class Naming Convention? and How to use your code to be more organized and easier to read. 🧑💻✨
The Block, Element, Modifier (commonly referred to as B.E.M.) is a front-end methodology that as the name says, consists of 3 important parts: Create a Block, Take an Element, and Especified a Modifier
Each follows a set of rules to achieve a simple, powerful, and naming convention that makes classes in HTML and CSS easier to read and understand.
🛈 In professional environments: B.E.M. becomes indispensable for code efficiency when using SASS (we'll see an example later).
B.E.M. Convention
TALK OF THE WEEK
What is the meaning of B.E.M.: Block, Element, and Modifiers?
Blocks are fragments of code that have their meaning and that will be reused, they can be nested but a block doesn't depend on other components.
The element is part of a block, if an element is inside another element does not mean that they are parent and child because there is no hierarchy.
Here’s an example of code, and the B.E.M. concepts:
/* Block component */
<nav>
/* Element that depends upon the block */
<ul>
/* Another element */
<li></li>
</ul>
</nav>
Finally, modifiers can manipulate the behavior or style of the block and elements.
B.E.M. has Problems with CSS?
In CSS there are two main problems:
Inheritance
Specificity
To define styles we can implement inheritance, for example, in the font-family of an application. The bad thing is that we can't control how far the inheritance goes and must re-create a CSS rule for what should not get the inherited property, so, we end up doing double work.
We add that when we want to define a new property to a selector already affected under CSS rules, we must be much more specific (much better) than the previous specificity.
For example:
/* The text inside li must be white */
li {
color: #fff
}
ul li {
color: #000
}
/* And we need an special tag: color red */
ul li.red {
color: red
}
// More specifity is complied
Advantages of B.E.M.
- It communicates purpose: functionalities
Always unique names
Easy to maintain: BEM is easy to read, easy component location
Reusable components: Use the library for big applications
Not cascading: the elements do not have parents
This is a short introduction to what you have just read:
If there is an error with the player, you can watch the video at the following LINK.
You should consider B.E.M. if you want to restyle a component, and you need to easily see what modifiers and elements exist. And, by reading the markup and CSS, you should quickly get an idea of which element depends on another one.
B.E.M. gives everyone on a project a declarative syntax that they can share so that they’re on the same page.
Block: Write ".className" (like a conventional class name)
Element: Use "__elementName" two underscore symbol, follow the element name
Modifier: "--modifier/Behavior" put two middle dashes before the modifier name
Let's make B.E.M. Styles Ex:
In this B.E.M. methodology, a block is a top-level component, the elements can be placed inside and the modifier can affect either...
In this example, we created a simple card application implementing SASS. Later we switch to the BEM naming convention by defining a block, two elements, and the modifiers with their respective names.
If there is an error with the player, you can watch the video at the following LINK.
¡Thanks for reading!
📍 Connect with us on Instagram 👇
Comentários