What is BEM? Why BEM is necessary for CSS/SCSS?

when we refer any CSS/SCSS file, at that time we are unable to understand which class is used for which HTML tag

or

which is parent class name and which is child class name related to any HTML tag.

consider an example,

we create an article using HTML & CSS. This article consists of Tittle, text & secondary-text, and its output is like the following image.

this article HTML code will look like

and article CSS Code will look like

here, when we refer CSS file directly then we can not find any relationship between these classes.

consider some other people refer your code or you want to some enhancement in it but face some difficulty in it because cannot find any relationship in CSS Classes.

so overcome this problem concept of BEM comes in a picture.

What is BEM?

BEM stands for Block Element Modifier

It can be used to show the relationship between classes.

in simple word, with the help of BEM, we can easily find out which is parent CSS class and which its child CSS Classes without looking in HTML.

1. Block

It is a class-name which directly represent its Parent HTML Tag. and it is represented using a dot symbol with class-name

.article

2. Element

HTML tag inside the block is called element. it is represented by the “ - ” symbol in a class name.

.article-text

3. Modifier

If HTML tag has special property other than Element inside a Block then it called as Modifier. this is represented by the “- -” symbol in a class name associated with block and modifier.

.article-text-special