Educational - CSS BEM

What is BEM?

BEM stands for Block, Element, Modifier. It is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project. ⁣

Why should you use BEM?

CSS is a language that’s easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable, hence we use the BEM methodology to make CSS maintainable.

Benefits of using BEM

BEM provides a modular structure to your CSS project. Because of its unique naming scheme, we won’t run into conflicts with other CSS names. BEM also provides a relationship between CSS and HTML. Ambiguous names are hard to maintain in the future⁣. It saves lots of debugging time in the future.⁣

There are three main parts of BEM.
    Block which holds everything (elements) inside and acts as a scope.
    Element which acts as a specific part of the component.
    Modifier which adds additional styles to a specific element(s).

EXAMPLE -

<div class="head">
  <div class="head__eye head__eye--small">(o)</div>
  <div class="head__eye">(o)</div>
</div>

.head {
  height: 5em;

  &__eye {
    height: 0.5em;

    &--small {
      height: 0.4em;
    }
  }
}
Block is a top-level abstraction of a new component. This block can be thought of as a parent.
/ * Block Component * /
.head{}

Elements, or child items are placed inside the block and can be denoted by two underscores following the name of the block.
/ * Element that depends upon the block * /
.head__eye{}

Modifiers can modify the block so that we can style that particular component without infliction changes on a completely unrelated module. This is done by appending two hyphens to the block.
/ * Modifier that changes the style of the block * /
head__eye--small {}


Conclusion

There are many options to choose from when writing CSS. Some prefer to write clean styles in pure CSS. Others prefer to use methodology like BEM. No matter the choice, styles need to be readable and maintainable. Consider using some methodology like BEM for an easy way to keep the code clean and clear.

NOTE - I have also used BEM as an example for social icons in footer for  spooky ..


Reference:
  •  https://en.bem.info/methodology/naming-convention/ 
  •  https://www.devbridge.com/articles/implementing-clean-css-bem-method/ 
  •  https://getbem.com/introduction/