BEM SASS Demo

bem.scss

/*
 * .navbar is the name of our component
 *
 */
.navbar {
  height: 90px;

  // .navbar__container
  &__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // We could vertical align this.
  }

  // We could have nested below inside "&__container", but
  // I do not ususally go that deep
  &__container__logo {
    text-align: left;

    // Now I will go deep
    &--svg {
      // your style for logo
    }
  }

  &__container__links {
    text-align: right;

    &--home {
      // style for a.navbar__container__links--home
    }
  }

  // Media Queries
  @media all and (max-width: 768px) {
    
    // We are already inside our ".navbar" element

    &__container {
      flex-direction: column;
    }
  }
}