BEM

This project makes use of the Block, Element, Modifier methodology (commonly referred to as BEM) which is simply a naming convention for classes in HTML and CSS. Its main goal is to help better understand the relationship between the HTML and CSS in a given project.

An example of this would be:

/* Block component */
.btn {

/* Element that depends upon the block */ 
&__price {}

/* Modifier that changes the style of the block */
&--orange {} 
&--big {} 
&--active {}

}

Here the block should be thought of as a parent. Child elements can be placed inside and these are denoted by two underscores following the name of the block like &__price { } (where the '&' is simply a placeholder for the parent element 'classname' which in this case is 'btn'). Finally, modifiers can manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unrelated module. This is done by appending two hyphens to the name of the block just like &--active.

The markup will then look like this:

<button class="btn btn--active">
  <span class="btn__price">$9.99</span>
</button>