Naming classes has never been a simple aspect of CSS, especially when working on a project that has a lot of HTML selectors, rule sets, and many pages. Because of the potential for issues with specificity and the possibility that altering and modifying CSS styles in one place would break styles in another, maintaining and developing that code may be challenging. In this article, we will examine how to write clean, organized and maintainable code using a CSS naming technique BEM, we will examine what is BEM, why you should adopt BEM, how it functions and how to implement BEM successfully.
Prerequisite: Basic knowledge of HTML AND CSS.
What is BEM?
The abbreviation BEM stands for Block Element Modifier. This is a front-end naming technique used to group and name CSS classes. For class names in HTML and CSS, the Block, Element, Modifier technique is widely used. By abiding by few straightforward guidelines, it makes writing clean CSS easier. This technique adheres to the Do not Repeat Yourself (DRY) and Keep it Short and Simple (KISS) principles. The BEM framework can help projects of any scale that use CSS, unless styles are written directly inside of JavaScript files that have previously been organized and are used with Styled Components or a similar technique.
Why BEM?
Without using any naming techniques in a large project with a large code base, there are numerous problems with class naming in HTML and CSS. Among them are;
How to deal and keep up with nesting is difficult.
Code is difficult to modify and alter without breaking something in the entire project.
Overriding classes accidentally.
Class names collisions between team members.
Team members find it difficult and time consuming trying to understand the functions of class names that were not specified by them.
Here are a few reasons why you should adopt the BEM Methodology of naming classes in HTML and CSS.
Organization and Scalability Your classes, class names, and styling will all become much more organized using BEM, and organization in a project with a vast code base is a big plus.
Semantic accuracy and Readability To explain why you did anything or what controls what in your code when you use a large number of random classes, you must use lots of comments. BEM is self-documenting since its naming system is so readable and semantically accurate that you don't require additional documentation or comments of any sort. It documents itself as you code.
Avoids class name Collision BEM Methodology provides a structure, which speeds up development and the implementation of new features; the CSS code base is more manageable over time; and it makes teamwork simpler because everyone seems to speak the same language.
Very easy to write and Debug The BEM technique provides you with a reliable and straightforward framework that is basic enough for everyone involved in a project to understand.
Avoids specificity issue As we all know, when CSS is not maintained and structured properly, larger projects can soon become extremely messy. This is assisted by BEM. BEM encourages developers to write HTML and CSS without worrying about inheritance and specificity problems.
Modularization and Reusability By using BEM block styles, you may avoid cascade issues in your project and move blocks to other new projects, which reduces the amount of CSS code you will write for a project and makes it easier for you to maintain.
How does BEM work?
BEM is an acronymn for Block Element Modifier.
Syntax
The syntax of the BEM Methodology follows thus;
.block__element--modifier
Let’s take a look at what these components of BEM mean and how we can use them.
Block
Block is a standalone component or entity that is meaningful on its own. A block can be seen as parent container that has other children and grandchildren under it. When using BEM method of naming classes it is required that you specify a block. A block could be a card, header, footer, container, menu, input. In the image above, the class name given to the block will be .card.
Element
An element is a part of a block that has no standalone meaning and it is semantically tied to its block. An element can be seen as anything that goes into the block. Basically the children of the parent container. In BEM you denote an element with a double underscore __. To give an element a class name, the element’s name is separated from the block name with a double underscore__. Using the image above, we have identified a block with a class name of .card, Inside this card we have an image, a description text and buttons as children within the .card container. Class names for the elements image, tittle, description and buttons are as follows;
/*Image*/
.card__image
/*Tittle*/
.card__title
/*description*/
.card__description
/*Button*/
.card__button
Modifier
A modifier defines the appearance state or behaviour of a block or element. This is a flag on the block or the element. They are applied to modify an element’s or a block’s look. In BEM you denote a modifier with a double hyphen --. To change the look of a block or an element we will have to give the block or the element an additional class name where modifier name is separated with a double -- from the block or element’s name.
Syntax
.block--modifier
.block__element--modifier
In the card component above we have a button. Adding a modifier to it the class name of the button since we want the appearance of the button to change when we hover around it. The class name will be written as;
.card__button--active
You can look up the codes for this example in the codepen embedded below.
Conclusion
To wrap things up, it is worth of note that there is no BEM police nowhere to make sure you implement BEM to build scalable and maintainable interfaces. There are many options to choose from when writing CSS. BEM in itself is not entirely a lifesaver. But it is an ideal way to write CSS because it provides a naming structure that is semantically accurate and useful when working on a large project with lots of developers. Thank you for reading my article. Feel free to drop your thoughts, suggestions and questions in the comment section.