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

Сейчас пишу селекторы в таком порядке:
.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 — оверкилл.

Сам вопрос: в каком порядке пишете вы?
  • Вопрос задан
  • 267 просмотров
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
.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 () {}
}
Ответ написан
@KononovD
мне нравится компонентный подход, соответственно css разделен на файлы. стили я пишу примерно так:
.header {
    background: #fff;
    
    &::after {
        content: "";
        background: #000;
    }

    &:hover{
        background: #000;

        &::after{
            background: #fff;
        }

        .header__box{
            background: #fff;
        }
    }

    &__box{
        background: red;
    }
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы