When building small-scale websites, organizing CSS code may be not an issue, however, if you have large stylesheets with thousand of CSS classes, you should consider using a methodology that will make writing CSS easier. This is where BEM comes into play.
The CSS BEM methodology is a naming convention for organizing and naming CSS classes. It was created by the Russian Search Engine Yandex and has grown in popularity among developers. This article will cover how it works, its rules and best practices, with examples.
How CSS BEM Methodology Works
BEM stands for Block, Element and Modifier. It divides each UI components into these there parts. The purpose here is breaking a website into organized and independent modules. These parts are:
Block
A block represents a standalone component or top-level module on a web page. You can think of it as a reusable structure with many components in your website.
Element
An element is the individual parts within a block that have no standalone meaning. They belong to a block and cannot exist outside of a block.
Modifier
Modifiers are optional flags that can be applied to blocks or elements to modify their appearance or behavior. It allow to create variations of a block or element.
BEM Naming Convention
The BEM naming convention follows a few specific syntax for defining the structure and relationships between blocks, elements, and modifiers. The two most used syntaxes are as follows:
.block__element--modifer{}
/* or */
.block__element_modifier{}To see this syntax in action, let’s suppose, we have an Card component and we want to apply BEM methodology to it. In this case, our HTML structure may be like:
<div class="card">
<div class="card__header">
<h2 class="card__title">Card Title</h2>
</div>
<div class="card__body">
<p class="card__content">
This is the content of the card. It can contain any text or other elements.
</p>
</div>
<div class="card__footer">
<a href="#" class="card__button card__button--highlighted">Read More</a>
<a href="#" class="card__button card__button--disabled">Cancle</a>
</div>
</div>In this example, card is the block. Header, title, body, content, footer and button are element. Lastly, highlighted and disabled suffixes are modifiers.
To style this card component, we will use the SCSS/SASS CSS preprocessor, which adds additional features to CSS. SCSS is a good option over traditional CSS because it allows nested selectors and provides an easy way for building classes with suffixes.
Here is the example:
.card {
&__header {
// Design here
}
&__title {
}
&__footer {
}
&__button {
&--highlighted {
}
}
}
As you realize, in this example, we have used the SCSS & symbol. This symbol allows to reference to parent selector in nested selectors, which is very helpful while writing BEM classes as they are quite long. You can find more detailed information about this symbol in the article: SCSS & (Ampersand) Symbol
BEM Methodology Practises
When using the BEM Methodology, there are certain points that you should be follow for consistency in your CSS file. These considerations are important because you need to make sure you follow the same methodology when writing CSS so that the classes organization is not broken.
Here are some suggested practises:
Modifiers Are For Both Elements And Blocks
Although, in the syntax, modifiers appear to be applied to the element. Modifiers in BEM can be applied to both blocks and elements. So you can change the appearance of both the entire block and a single element.
<div class="block block--modifier"> // Modifier in block
<div class="block__element--modifier"></div> // Modifier in element
</div>Nested Blocks Are Allowed
A website is made up of many blocks, and these blocks are often related to each other. That’s why you can use blocks in nested each other. Consider the following example where there are there blocks: header, navigation and form. While header is a parent block, navigation and form blocks are child blocks.
<!-- header block -->
<header class="header">
<!-- navigation block -->
<div class="navigation"></div>
<!-- form block -->
<form class="form"></form>
</header>Elements Also can be nested in each other
Not only blocks can be nested in each other but also elements can be placed in nested. Take a look at the following example where article is block, while content, header and button are elements.
<form class="article"> <!-- Block -->
<div class="article__content"> <!-- Element -->
<input class="article__header"> <!-- Element -->
<button class="article__button">Share</button> <!-- Element -->
</div>
</form>Don’t Use Elements Outside Its Block
Because the elements mean something with their block, the elements are associated with their own block, so you can’t use them outside of a block.
<div class="article"> </div> <!-- This is a Block -->
<div class="article__content"> </div> <!-- Wrong because it is not in article block-->Do Not Use Elements Together For A Class
A block can have multiple elements, even nested. However, a component cannot represent two elements at the same time. Therefore, do not combine two elements associated with a block.
<form class="article"> <!-- Block -->
<div class="article__content"> <!-- Element -->
<input class="article__content__button"> <!-- It is wrong -->
</div>
</form>Do not use modifiers Alone
Modifiers change the functionality or appearance in both the elements and the block. So you should use modifiers in block or element combination.
<div class="form--active"></div> <!-- Combination with a Block-->
<div class="form__buttons--active"></div> <!-- Combination with a Element-->Conclusion
This article provided an overview of the CSS BEM methodology for organizing CSS classes.
Lastly, note that, you are not required to use the BEM methodology as a CSS naming convention. It can have advantages and disadvantages based on the project you are working on. BEM is also not the only option, you can find more methodologies for your project or even create one for yourself.
Thank you for reading.