BEM model in CSS

BEM model

Jul 13, 2022

While naming CSS classes, it is often confusing to write those names and becomes more confusing when you mix up different names of the classes. If You have a large project then it becomes a lot more time consuming and will be difficult to maintain in the future.

To solve the problem, there are various other methods, but the popular one is BEM. According to Marc McDonnell, The reason I choose BEM over other methodologies comes down to this; it is less confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognizable terminology.

What is BEM?

BEM stands for Block, Element and Modifier. A block as the name says like header, container, main, footer, etc. Element is tied to block e.g, header title, footer nav, main list, etc. Modifier changes their behavior or appearance like focused, disabled, checked, fixed, small, etc.

In a nutshell, a button can have button success and button danger. You use BEM model like below:

code image