What BEM Means and When a Coder Should Use It

What BEM Means and When a Coder Should Use It

A website designer wanted to know if BEM, or block element modifier, is a good technique for keeping the coding clean. They wondered if it makes things too complicated in CSS or HTML. This person asked the question to a large online community of web designers in order to get their experience-based opinions.

One person replied that BEM is a concept that could make it easier for the designer to revisit their code a long time in the future. The BEM could make it easier for the coder to understand the technique. It could also benefit a company if a new designer takes over a project. This person did add that BEM is anything but clean. It can add a layer of complexity to the coding process, and not everyone wants to make their project more complicated than it has to be.

Someone else answered the original poster, stating BEM is not a magic pill. Its purpose is to handle large CSS structures. It helps prevent style scope issues. This person noted that BEM also uses character counts on classes and modifiers on the templates of HTML, which is why it might not look clean to some designers. This respondent also noted that the BEM can be repetitive, which can make reviewing the code onerous.

BEM allows the designer to create more structure in their code. It allows classes to be named based on specific elements. These class names allow for more consistency in coding. If multiple people will be working on a project, this could be useful. The block is the container for the element. It forms the root of the class. The modifier changes the elements within a block.

Many people complain that BEM class names are too long. However, there is a reason for this. The long BEM class names are highly specific. Anybody who looks at it will understand exactly what it is for and why it is used. A person who wants to have a clear hierarchy in their front-end development would be the most likely to make use of BEM in their CSS coding. For more information click here https://i.redd.it/s9g7ur0i2mk41.png.

BEM Coding CSS Effects HTML Web Design Web Designer