Соглашение о порядке селекторов в стиле БЭМ в Stylus - Середина между 1 и 2 вариантами

stylus-bem

// Блок
.block
  // ...
    
  // Начинаются штучки, касающиеся блока: медиа, миксины, псевдоклассы, псевдоэлементы    
  // @media-примеси блока и другие миксины
  +below(640px)
    // ...
      
  // Псевдоэлементы блока
  &::after
    // ...
      
  // Псевдоклассы блока
  &:first-child
    // ...
      
    // Псевдоэлементы псевдокласса блока, третий уровень вложенности - полет нормальный
    &::after
      // ...
        
  // Продолжаем говорить о том же блоке, но уже модифицируем его согласно методологии           
  // Модификаторы блока
  &_key_val
    // ...
    
    // Штучки тоже модифицируем...
    // Псевдоэлементы модификатора элемента
    &::after
      // ...

    // Псевдоклассы модификатора элемента
    &:first-child
      // ...
      
      // Псевдоэлементы псевдокласса блока
      &::after
        // ...            

      // Псевдоклассом модифицированного блока изменяем элемент. 
      // Даже находясь выше самого элемента вес селектора позволяет это сделать ну и так читабельнее
      // Суть в том, что здесь мы не определяем элемент, а изменяем его в контексте модифицированного блока
      & &__element
        // ...
          
    // Модифицированным блоком изменяем элемент
    & &__element
      // ...

  // С блоком закончили, перейдем к элементам. 
  // Так бывает, что элемент может быть помещен уже в новый селектор вида .block__element из-за громоздкости блока
  // Только для читабельности. И то что элемент определяется вконце блока позволяет их легко разделить не ломая кодстайл
    
  // Элементы
  &__element
    // ...
    
    // Всякие фишечки
    // @media-примеси элемента и миксины
    +below(640px)
      // ...
        
    // Псевдоэлементы
    &::after
      // ...
        
    // Псевдоклассы элемента
    &:first-child
      // ...
        
      // Псевдоэлементы псевдокласса, четвертый уровень вложенности - возможна боль
      // Но вцелом не критично, поскольку не часто и не густо
      &::after
        // ...
       
    // Модификаторы элемента
    &_key_val
      // ...
      
      // Модифицируем фишечки
      // Псевдоэлементы модификатора элемента
      &::after
        // ...

      // Псевдоклассы модификатора элемента
      &:first-child
        // ...
        
        // Псевдоэлементы псевдокласса модифицированного элемента
        &::after
          // ...
            
        // Поскольку элемент не может (не должен?) быть контекстом для вложенных элементов 
        // (скорее именно их просто не должно быть), потому уровней вложенности дальше 4 нет

  // N элементов ещё...