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 {
....
}