В каком порядке писать Sass-селекторы?
.block {
  $this: &;

  color: red;
  
  &__element { font-size: 12px; }

  &:hover &__element { transform: scale(1.1); }

  @media () {}

  //==
  //== Модификация какая-то
  //== ==========================

  #{$this}_mod {
    color: green;
    &__element { font-size: 16px; }
    @media () {}
  }
  #{$this}__mod:hover &__element { transform: scale(1.1); }

  //==
  //== Другая модификация
  //== ==========================

  &_mod { background: yellow; }
  @media () {}
}
мне нравится компонентный подход, соответственно css разделен на файлы. стили я пишу примерно так:.header {
    background: #fff;
    
    &::after {
        content: "";
        background: #000;
    }

    &:hover{
        background: #000;

        &::after{
            background: #fff;
        }

        .header__box{
            background: #fff;
        }
    }

    &__box{
        background: red;
    }
}
и отдельным файлом медиа, как правило уже без scss, привык так)
да и это (вложенность) не всегда нужно