Improving Front-End Development with BEM Methodology
As a web developer with experience working on a variety of projects, I’ve learned the importance of using a methodology for front-end development. That’s why I was drawn to the BEM (Block-Element-Modifier) methodology, which has helped me write cleaner, more maintainable code in my projects. In this article, I’ll share my personal experience with BEM and explain why I believe it’s a valuable tool for web developers to have in their toolkits. Whether you’re a seasoned developer or just starting out, I hope my insights will help you improve your front-end development skills and create more efficient, effective code.
I chose to use the BEM methodology in my projects because it provides a clear and consistent way of naming and organizing CSS classes. Before I discovered BEM, I found that I was spending a lot of time trying to come up with meaningful class names that accurately described the purpose of each element on the page. This led to confusion and inconsistency in my code, which made it difficult to maintain and update my projects over time.
With BEM, I no longer have to spend time brainstorming unique class names for each element. Instead, I can use a standardized naming convention that consists of three parts: the “Block”, which is the high-level component or section of the page; the “Element”, which is a sub-component of the block; and the “Modifier”, which adds variations to the element or block.
What is BEM?
BEM stands for Block-Element-Modifier, which is a front-end development methodology that provides a standardized approach to naming and organizing CSS classes. The methodology was developed by the team at Yandex, a Russian search engine, as a way to improve the consistency and maintainability of their code base.
In the BEM methodology, a “Block” is a high-level component or section of the page, such as a header or sidebar. An “Element” is a sub-component of the block, such as a button or input field. A “Modifier” is a variation of the block or element, such as a different color or size.
A Block:
<div class="card">
…
</div>“card” is the name of the block.
An Element:
<div class="card">
<h2 class="card__title">Card Title</h2>
<p class="card__text">Lorem ipsum dolor sit amet…</p>
</div>“card__title” and “card__text” are the names of the elements. The double underscore indicates that they are part of the “card” block.
Modifier example:
<div class="card card - featured">
…
</div>“card — featured” is the name of the modifier. The double hyphen indicates that it is a modifier of the “card” block.
I first learned about BEM through online research, documentation, and tutorials, and I was immediately drawn to its clear and consistent approach to class naming. I started experimenting with the methodology in my own projects, and I quickly discovered that it helped me write cleaner, more maintainable code.
One way BEM has helped me is by making my code more modular. By breaking down the page into blocks and elements, I can easily reuse code across different parts of the site without having to write new styles from scratch. For example, if I have a block for a product card on an e-commerce site, I can easily reuse that block for similar product cards on other pages.
Another way BEM has helped me is by making my code more readable. By using a standardized naming convention, I can easily understand the purpose and relationship of each element on the page. This has made it easier to maintain and update my code over time.
Benefits of Using BEM
Improved code readability: By providing a standardized approach to class naming, BEM has made my code more readable and easier to understand. I can quickly identify the purpose and relationship of each element on the page, which has made it easier to maintain and update my code over time. For example, .header__logo for the logo element within the header block
Enhanced code maintainability: BEM’s modular approach to coding has made it easier to maintain and update my code over time. By breaking down the page into blocks and elements, I can easily update styles across different parts of the site without having to make extensive changes to the underlying HTML.
Increased scalability: BEM’s modular approach to coding has also made it easier to scale my projects as they grow and evolve over time. I can quickly add or remove blocks and elements as needed without having to make extensive changes to the underlying code.
Improved team collaboration: BEM’s standardized approach to class naming has made it easier to collaborate with other team members. We can quickly understand each other’s code and make updates without having to spend time deciphering unclear class names or organization schemes.
Better code re-usability: BEM’s modular approach to coding has made it easier to reuse code across different parts of the site. By creating reusable blocks and elements, I can save time and effort in writing new styles from scratch for similar components.
Challenges of Using BEM
While I’ve found BEM to be a useful methodology in my front-end development projects, there were some challenges that I faced when adopting it. Some of the challenges included:
Learning curve: When I first learned about BEM, it took me some time to fully understand the concept and how to apply it in my projects. The naming convention and organization of classes were different from what I was used to, which made it initially challenging to implement.
Convincing others on my team: Ha ha! That is the hard part;-) When I suggested using BEM to my team members, not everyone was immediately convinced. Some of my colleagues were skeptical of the new approach and questioned the benefits of using it.
To overcome these challenges, I took several steps:
Research and practice: I spent time reading articles and documentation on BEM, and also practiced implementing it in my own projects. This helped me become more familiar with the methodology and gain confidence in using it.
Leading by example: I started using BEM in my own projects and shared my positive experiences with my team. By showing the benefits of using BEM through my own work, I was able to convince some of my colleagues to give it a try.
Providing education and training: I offered to provide education and training on BEM to my team members who were still skeptical. By sharing my knowledge and experience with the methodology, I was able to help them understand how it could benefit our projects.
BEM in Practice
Now that I’ve discussed what BEM is, its benefits, and the challenges I faced in adopting it, let me share how I use BEM in my daily workflow and how it has helped me solve specific design problems.
When I start a new project, I always begin by breaking it down into smaller components or blocks. Each block is then broken down into elements, which are the smaller parts that make up the block. Finally, I add modifiers to the blocks or elements to make small changes to their appearance or behavior. I use this approach to name my classes in a way that follows the BEM methodology.
For example, let’s say I’m working on a blog website that has a header component. Within that component, I have a logo and a navigation menu.
<header class="header">
<a class="header__logo" href="#">Logo</a>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="#">Home</a></li>
<li class="header__nav-item"><a href="#">About</a></li>
<li class="header__nav-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>.header {
/* Header styles */
}
.header__logo {
/* Logo styles */
}
.header__nav {
/* Navigation styles */
}
.header__nav-list {
/* Navigation list styles */
}
.header__nav-item {
/* Navigation item styles */
}Here is an example from my portfolio project. This is the navbar component. see how I use BEM in there.
Alternatives to BEM
While I’ve found BEM to be an effective methodology for front-end development, there are other approaches that developers can use to structure their CSS. In the past, I’ve considered and used other methodologies, including Object-Oriented CSS (OOCSS) and Atomic CSS.
OOCSS is a methodology that focuses on separating the structure and skin of components. It encourages the use of reusable CSS classes that describe the structure of the component, rather than its appearance. For example, a button component might have a “.button ”class that describes its structure, and a“ .button-red” class that describes its appearance. This can make it easier to reuse components across different projects or pages.
Atomic CSS, on the other hand, is a methodology that focuses on creating small, single-purpose classes that are combined to create more complex styles. Each class describes a specific property or value, such as “.m-1” for margin or “.bg-red” for background color. This can make it easier to create and manage complex styles, but can also lead to more verbose HTML and CSS.
While both of these methodologies have their merits, I prefer BEM for several reasons. Firstly, I find that BEM provides a good balance between structure and presentation, making it easy to understand how different components fit together. Secondly, the naming convention used in BEM is consistent and predictable, making it easier to avoid naming conflicts and maintain my code over time. Finally, I appreciate the flexibility that BEM provides, allowing me to add modifiers to customize the appearance or behavior of components as needed.
Finally, we are at the end of our discussion. Using the BEM methodology has greatly improved my front-end development workflow. By providing a consistent naming convention and a clear structure for my CSS, I’ve been able to write cleaner, more maintainable code that’s easy to understand and modify. I’ve also found that BEM has helped me to work more efficiently, by making it easier to collaborate with other developers and to manage large-scale projects.
If you’re new to BEM, I encourage you to give it a try. While there may be a learning curve at first, I believe that the benefits of using BEM are well worth the effort. By taking a structured, modular approach to your CSS, you can save time, reduce errors, and create more scalable, maintainable projects.
I hope that you’ve found this article helpful. I invite you to share your own experiences with BEM in the comments section below. If you’d like to stay up-to-date on my latest articles and web development and programming tips, please follow me on medium. And as always, thank you for reading!
PS: I strongly recommend you to read the following article about how we use BEM in our projects with clear examples by Nathan Rambeck.
