Introduction to BEM
Naming classes in CSS has always been difficult for meš„. Luckily a few months ago I came across the BEM naming convention. A naming convention is an agreed style for naming things(in this case CSS). There are different CSS naming conventions available, such as SMACSS, AMCSS, BEM, etc. For this article, however, I would be talking about BEM.
Prerequisites
- Basic knowledge of Html and CSS.
What is BEM
BEM is short for Block Element Modifiers and is a CSS naming convention for classes in HTML and CSS.
The Block refers to a component such as a header, footer, nav, button, inputs, and the likes.
Element ā they are found inside the block(components). they may be seen as children of the overall parent component.
Modifiers on the other hand are used to style a block or an element without affecting other unrelated components
Why use BEM
- BEM helps us write CSS that is easy to read and maintain.
- In large projects, BEM ensures that there are no conflicting styles.
- It conveys the function and purpose of a CSS code.
- It helps developers better understand the relationship between the HTML and CSS in a given project.
BEM helps us write CSS that is easy to read and maintain.
- In large projects, BEM ensures that there are no conflicting styles.
- It conveys the function and purpose of a CSS code.
- It helps developers better understand the relationship between the HTML and CSS in a given project.
How to use BEM
Now that we know what BEM is and why we should use it, its time to dive into the how. The parent components are named by using a single hyphen as seen in the example below
<section class=āabout-usā>
Element class names on the other hand are derived by adding two underscores (__), followed by the element name, like so
<h3 class=āabout-us__titleā>best title </h3><p class=āabout-us__textā>I love bunnies</p>
when naming modifiers, we use two hyphens ( ā ) followed by the name of the element
<span class=āabout-us__title ā greenā>ever</span>
Putting it all together we have:
<section class=āabout-usā>
<h3 class=āabout-us__titleā>best title
<span class=āabout-us__title ā greenā>ever</span>
</h3>
<p class=āabout-us__textā>I love bunnies</p>
</div>
we could style it like this
.about-us{
margin: 0 auto;
color: #fff;
}
.about-us__title {
font-weight: bold;
}
.about-us__title ā green {
color: #05b993;
}
.about-us__text {
font-size: 24px;
}
Scss makes it even easier for us to style BEM. Styling this with SCSS would look like this
.about-us{
margin: 0 auto;
color: #fff;
&__title {
font-weight: bold;
& ā green {
color: #05b993;
}
}
&__text {
font-size: 24px;
}
}
Pretty cool right?
Conclusion
Truly, BEM gives our CSS a solid structure that is easier to understand. You may not get it right now, but Iām sure with time you will. Have fun naming with BEM.