Naming

This system uses baseline BEM with -- (double dash) denoting modifiers to classes and __ (double underline) denoting elements in a block. For example:

    
<div class="block-element">
  <span class="block-element__item">
    <span class="block-element__nested-item"></span>
  </span>
</div>

<div class="block-element--smaller">
  <span class="block-element__item"></span>
</div>

<div class="block-element">
  <span class="block-element__item--red"></span>
</div>
  

For scss it means that we should use nesting of classes whenever possible:

    
.block-element {
  background: blue;

  &--smaller{
    font-size: .7em;
  }

  &__item{
    color: white;
  }

  &__nested-item{
    border: 1px solid;
  }
}