BEM CSS
The BEM methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues.
BEM stands for Block Element Modifier which is an explanation for its structure.
CSS Class Naming convention
A Block is a standalone component that is reusable across projects and acts as a "namespace" for sub components (Elements).
Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.
/* block component */ .block { } /* element */ .block__element { } /* modifier */ .block__element--modifier { }
Here is an example with the class names on markup
<nav class="navbar"> <a href="/" class="navbar__link navbar__link--active"></a> <a href="/" class="navbar__link"></a> <a href="/" class="navbar__link"></a> </nav>
In this case,
navbar
is the Block,
navbar**link**
is an Element that makes no sense outside of the navbar component, and
navbar
link--active
is a Modifier that indicates a different state for the
navbar__link
Element.
<a href="/" class="navbar__link is-active"></a>
.navbar__link.is-active { .... }