В каком порядке писать Sass-селекторы?

Question

[Владимир]

Сейчас пишу селекторы в таком порядке:

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

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

  &:hover {
    // ...
  }

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

  &_modifier {
    // ...
  }

  &__element {
    // ...
  }

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

Но, например, если при .block:hover (или .block_modifier) нужно изменить вложенный .block__element, то получается, что это правило задано раньше самого .block__element. Stylelint при стандартных настройках ругается на "no-descending-specificity", да и запутаться можно.

Если переместить все :hover и &_modifier в конец, то "no-descending-specificity" починится, но становится тупо неудобно — нужно пролистать весь файл, чтобы понять, есть ли вообще состояния у элемента.

Да, знаю, что не совсем по БЭМ, но иногда с JS навешивать модификаторы на каждый элемент при hover — оверкилл.

Сам вопрос: в каком порядке пишете вы?

Answer 1

[Сергей delphinpro]

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

Answer 2

[KononovD]

мне нравится компонентный подход, соответственно css разделен на файлы. стили я пишу примерно так:

.header {
    background: #fff;
    
    &::after {
        content: "";
        background: #000;
    }

    &:hover{
        background: #000;

        &::after{
            background: #fff;
        }

        .header__box{
            background: #fff;
        }
    }

    &__box{
        background: red;
    }
}

и отдельным файлом медиа, как правило уже без scss, привык так)
да и это (вложенность) не всегда нужно

Comments

[Сергей delphinpro]

и отдельным файлом медиа

Зачем? Ну зачем вы так делаете? вы не представляете сколько боли приходится испытывать когда дорабатываешь/исправляешь верстку на таких сайтах. Есть блок на странице — ну опишите вы все его стили в одном месте, включая медиазапросы...

[KononovD]

Сергей delphinpro, мне так удобно)
в каждом файле отдельные стили:
базовые стили
шрифты
сборка всех либ
переменные
медиа
основные стили
что-то аля "разделяй и властвуй")) а вообще для меня писать все стили в одном месте - просто неудобно) может я когда-нибудь к этому приду сам, но не сейчас.

[Сергей delphinpro]

KononovD, о других не думаете ))
А, кстати, сами-то пробовали, вернувшись спустя месяц-три к своему коду, что-то в нем переделать? Весело наверное прыгать по нескольким файлам, чтобы перестилять один блок.

[KononovD]

Сергей delphinpro, к своему - нет, с чужим работал)
там человек использовал scss, но без "&" и в итоговой сборке там были дикие стили)
класс на классе на классе)) - вот это было весело)

а вообще, я правлю чьи-то стили путем изменения стилей в devTools и потом просто переношу на нужное место в коде, так получается вполне неплохо

а что бы переверстать какой-то конкретный блок, в моем случае - это всего 2 файла:
файл с основными стилями и файл с медиа( кстати говоря, бегать по медиа файлу довольно не удобно )

[Сергей delphinpro]

KononovD, Иногда нужно пересилить себя и последовать общим практикам, чтобы позже ощутить всё их удобство.

disclaimer: но я ни на чем не настаиваю =)

[KononovD]

Сергей delphinpro, пишу сейчас реакт-компоненты и писать медиа запросы в том же месте, где и остальное - довольно удобно)
не пробовал внедрять это в обычную верстку еще, но как-нибудь попробую)