BEM, which stands for Block-Element-Modifier, is a popular methodology for naming CSS. It was originally created by the Russian search engine Yandex to improve CSS code maintainability and scalability and has since been adopted by many companies and developers worldwide.
How BEM Works
BEM is a methodology for dividing your web components into three different parts:
-
Blocks: The highest-level component in your hierarchy. Blocks are standalone parts of your page that can be reused throughout your project.
-
Elements: Specific parts of a block associated with a block and it can't be used outside of that block
-
Modifiers: Variations of blocks or elements that change their appearance or behavior.
By seperating your CSS classes into these there part, you can create a modular system that's easy to maintain and scale.
BEM Methodology For Naming CSS
To write BEM code, you'll need to follow a few simple rules for naming your CSS classes. Here's an example of how you might use BEM to style a card component:
HTML Card Component
Consider the first scenario, where you have a card component that will be utilized throughout your application. How would you name your classes?
Here is the structure of BEM Methodolgy For Naming CSS
- block__element--modifer or
- block__element_modifier
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="card__description">This is a description of the card.</p>
<button class="card__button card__button--primary">Primary Button</button>
<button class="card__button card__button--secondary">Secondary Button</button>
</div>
<!--
Card (Block) |
-----------------------------------
| --- title(Element) |
| |
| ------ |
| | RED | negative(Modifier) |
| ------ |
-----------------------------------
-->
In this example, "card" is the block, "title", "description" and "button" are the elements, and "primary" and "secondary" are modifiers. Here's how you might style this component using BEM methodology:
.card {
/* Block styles */
&__title {
/* Element styles */
}
&__description {
/* Element styles */
}
&__button {
/* Element styles */
&--primary {
/* Modifier styles */
}
&--secondary {
/* Modifier styles */
}
}
}
Note that the & symbol in SCSS is used to reference the parent selector (in this case, .card) within the nested blocks and elements.
Guidelines For BEM Methodology
When using the BEM methodology, there are several important guidelines to follow.
Modifiers Also Can Be Applied To Blocks
Modifiers can be applied to both blocks and elements. This allows you to change the appearance or behavior of an entire block, rather than just a single element. For example:
<div class="block block--modifier">
<div class="block__element"></div>
</div>
Blocks can be nested in each other.
Blocks can be nested inside each other to create complex components. This allows you to create reusable blocks that can be combined in different ways. For example:
<!-- header block -->
<header class="header">
<!-- Nested contact block -->
<div class="contact"></div>
<!-- Nested form block -->
<form class="form"></form>
</header>
Elements can be nested inside each other.
Elements can also be nested inside each other to create more complex components. This can be useful when you need to create more complex UI elements. For example:
<form class="form"> <!-- Block -->
<div class="form__content"> <!-- Element -->
<input class="form__input"> <!-- Element -->
<button class="form__button">Submit</button> <!-- Element -->
</div>
</form>
It is not possible to use an element independently of its corresponding block
Elements should always be used within their corresponding block. This helps to prevent naming conflicts and ensures that your code is easy to understand. For example:
<div class="form"> </div> <!-- Block -->
<div class="form__content"> </div> <!-- It is wrong -->
An element can not be part of the another element
An element should not be a part of another element. This can make your code more difficult to read and maintain. For example:
<form class="form"> <!-- Block -->
<div class="form__content"> <!-- Element -->
<input class="form__content__button"> <!-- It is wrong -->
<input class="form__content-button"> <!-- It is true -->
</div>
</form>
A modifier can not be used alone
Modifiers should always be used in combination with a block or element. This ensures that your code is consistent and easy to read. For example:
<div class="form--active"></div>
<!-- It is wrong because there is no form block element -->
Good To Know
And here is some points to consider for using BEM methodolgy for naming CSS.
-
Avoid nesting too deeply: While nesting is allowed in BEM, it's important to avoid nesting too deeply. This can make your HTML and CSS difficult to read and maintain. Aim for no more than three levels of nesting.
-
Use clear and concise class names: The BEM methodology encourages the use of descriptive class names. Avoid using abbreviations or acronyms that are not immediately understandable.
-
Keep modifiers simple and reusable: Modifiers should be used sparingly and kept simple. Avoid creating modifiers that only apply to a single instance of a block or element. Instead, create modifiers that can be reused across multiple instances.
-
Document your BEM structure: As with any naming convention, it's important to document your BEM structure so that other developers can understand and follow it. Consider creating a style guide or documentation to outline your BEM conventions.
Conclusion
In this article, we have covered BEM methodology for naming CSS with some examples. At the end of the article, let me remind you that BEM methodology is an option for naming CSS, using it may have pros/cons depending on your projects and team.
Thank you for reading.