atomic-example.scss

// Atomic CSS
// Small, immutable and explicitly named utility classes.

.bg-red5 { backgound: $red5; }
.text-align-center { text-align: center; }
.padding-bottom-xl { padding-bottom: #{$size-xl}px; }

bem-example.scss

// Block Element Modifier
// Highly verbose and explicitly named classes.

.o-my-widget {
  backgound: $red5;
  padding-bottom: #{$size-xl}px;
  
  &__title {
    text-align: center;
  }
}

oo-example.scss

// Object Oriented CSS
// Single responsibility and inheritance. Should reflect the shape of the DOM.

.my-widget {
  backgound: $red5;
  padding-bottom: #{$size-xl}px;
  
  h2 {
    text-align: center;
  }
}