BEM, SaSS, Nesting...

bem-break-class-names.scss

// Good: don't break inside blocks, elements or modifiers
.my-button {
  &__icon-left {
    //
  }
  &__icon-right {
    //
  }
}

// Bad: break inside blocks, elements or modifiers
.my-button {
  &__icon {
    &-left {
      //
    }
    &-right {
      //
    }
  }
}

// Good: avoid chained elements and modifiers
// In this way, we can keep a nice clean two level nesting structure
.my-panel {
  &__inner {
    //
  }
  &__header {
    //
  }
  &__title {
    //
  }
  &__cover {
    //
  }
  &__content {
    //
  }
  &__footer {
    //
  }
  &__button {
    //
  }
}

// Bad: use chained elements or modifiers
// This style makes too many nesting levels
.my-panel {
  &__inner {
    &__header {
      &__title {
        //
      }
      &__cover {
        //
      }
      &__button {
        //
      }
    }
    &__content {
      //
    }
    &__footer {
      &__button {
        //
      }
    }
  }
}