Block Element Modifier (BEM) — Naming Conventions.
“ There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton “
Recently, I was working on a project and the Requirement includes using BEM Naming. At first, I thought it is just a simple naming technique not to be bothered, but when I studied a little bit about it, it’s pretty useful for a Developer to enhance the development speed, debugging, and the implementation of new features in code. Sadly, most CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term.
The reason I choose BEM over other methodologies is that it is less confusing than the other methods such as SMACSS but still provides us the good architecture we want and with a recognizable terminology.
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
Block: It is a DOM node that is meaningful on its own.
Element: It is a part of a block that is semantically tied to its block.
Modifier: A flag on a block or element. Use them to change their appearance or behavior.
Here is an example of a basic BEM Combined code.
