BEM helps with the specific naming and structuring of CSS class hierarchies and thus supports the development of semantically significant component structures. Individual structures in the DOM are named only with class names according to a certain pattern to make the code easier to read and more scalable.
The general pattern and naming convention for this is as follows. The common root class name/prefix
.block makes it easy to recognize all related classes in both CSS and HTML.
.blockis the parent component
.block__elementis a child element of
.block--modifieris a variant/version of
Of course, it’s also possible to have modifier classes on child elements.