example-state.scss

// States should also be easily identifiable.
// Because they're connected to dynamic behavior!
// And you want to quickly spot them

// do!
.example {
  &__list {
    &-isCollapsed {
      // code
    }
    
    &-isExpanded {
      // code
    }
  }
  
  // don't
  .example {
    &__listExpanded {
      // code
    }
    
    &__listCollapsed {
      // code
    }
    
    // that looks like a modifier,...done wrong!
    &__listItem--noIcon {
      // code
    }
  }