What order should I write Sass selectors in?

Question

css

Now I write selectors in this order:

.block-class {
  @include some-mixin();

  some-rule: value;
  another-rule: value;

  &:hover {
    // ...
  }

  @media ... {
    // ...
  }

  &_modifier {
    // ...
  }

  &__element {
    // ...
  }

  &__another-element {
    // ...
  }
}

But, for example, if at .block:hover(or .block_modifier) you need to change the nested .block__element, then it turns out that this rule is set before the .block__element. Stylelint swears at "no-descending-specificity" with standard settings, and you can get confused.
If you move everything :hoverto &_modifierthe end, then "no-descending-specificity" will be fixed, but it becomes stupidly inconvenient - you need to scroll through the entire file to understand if the element has any states at all.
Yes, I know that it’s not exactly BEM, but sometimes with JS, attaching modifiers to each element on hover is an overkill.
The question is: in what order do you write?

Answer 1

.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 () {}
}