Media queries при нестинге?

Question

[art style]

есть класс в нестинге

.class1
 .class5
  .class10
   .class15


@media (max-width:1024px)
как здесь прописать только .class15 без нестинга вышеперечисленных класов?

Comments

[Сергей delphinpro]

да за такую вложенность руки отрывать нужно.

[art style]

Сергей delphinpro,
всмысле? мне что каждый класс в каждой строчке писать?

[Сергей delphinpro]

art style, Большие уровни вложенности селекторов — плохой стиль, плюс создает различные неудобства в будущем.

.class1  .class5   .class10    .class15 {
}

Не должно быть таких селекторов в css. Ну, максимум, два уровня, чтобы переопределить что-то контекстно-зависимое.

Например:

.header .left .logo .logo-image {
}

ужасный селектор. Никто не запрещает написать короче, с меньшей специфичностью:

.logo-image {
}

Или, если вдруг логотип есть еще где-то, то хотя бы уменьшив контекст до минимума

.header .logo-image {
}

[art style]

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

[Ankhena]

art style, ваш собственный вопрос иллюстрирует минусы вашего подхода с огромной вложенностью.

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

Вы можете писать media непосредственно в каждом селекторе https://sass-scss.ru/documentation/pravila_i_direk...
Для упрощения делают миксин через content.

Если вы пишете кашу из селекторов вначале кода, а media хотите писать внизу файла, то придется эту вашу кашу таскать за собой. И именно по этому, так никто не делает.

[art style]

Ankhena, вложенность это порядок. нет вложенности, зачем использовать sass? ради переменных и прочих фишек? ну тогда легче ctrl+f нажимать. или тогда уж писать на чистом css с этими кончеными скобками

[Ankhena]

art style, вложенность это не порядок. Вложенность это повышение специфичности. В большинстве случаев бесполезное.
Порядок - это названия классов не требующие вложенности и разделение на файлы.

Если вы вот в этом примере
дадите нормальное название для секции: portfolio вместо section_4, то избавитесь от вложенности.
Дальше вы делаете .portfolio-app-image вложенным в .portfolio-app-block. Можно подумать, оно у вас где-то есть вложенное в контакты, новости или куда-то ещё. Очень сомнительно. Скорее всего .portfolio-app-image кроме как в портфолио нигде больше нету. Так зачем, во-первых, заставлять браузер проверять, лежит оно в .portfolio-app-block или нет (почитайте как браузер обрабатывает селекторы и ужаснетесь тому, что ему приходится пережить из-за вашего кода) и, во-вторых, вставлять себе же палки в колеса повышением специфичности.
Аналогично и с другими селекторами в вашем коде.
Всё это прекрасно переписывается в плоское дерево.
А для повышения порядка и модульности перекладывается в отдельный файлик portfolio.sass или scss.

[art style]

Ankhena, а есть какие-либо тесты производительности строк кода с вложенностью и без? я понимаю конечно что все ради производительности но на моем сайте 1000 строк кода с такой вложенностью не создаю проблем с загрузкой от слова совсем. поэтому если выигрыш в производительности минимальный, можно этим пренебречь

[Ankhena]

art style, пренебрегайте.
Тесты наверняка есть, ищите.

Answer 1

[Сергей delphinpro]

https://sass-lang.com/documentation/at-rules/at-root

Comments

[art style]

не подходит

[Сергей delphinpro]

art style, почему?

[Сергей delphinpro]

art style,

[art style]

Сергей delphinpro, у меня немного другое строение. я сначала пишу код в нестинге а потом отдельно внизу уже пишу media (max-width: 1000px)
я могу прописывать media к каждому классу но это дичь.
я хотел написать просто в конце media и перечислить новые классы, но вырвать класс из нестинга не получается

[Сергей delphinpro]

art style, ваши проблемы от того, что вы пишете код по принципу "каждый пишет как он хочет", вместо того, чтобы перенимать уже зарекомендовавшие себя практики.

Избавляйтесь от этой дикой вложенности, пишите медиа-запросы прямо в классах, пишите каждый класс в отдельном файле. Все будет по полочкам, и без проблем. Даже если сейчас вам кажется что это дичь.

[art style]

Сергей delphinpro, тогда мне не нужен sass и нужно просто переходить на чистый css. sass я использую чисто для нестинга и порядка. перейдя на чистый css порядок и простота уйдут моментально. если писать

@media (max-width:1440px)
@media (max-width:1024px)
@media (max-width:768px)
@media (max-width:425px)
@media (max-width:375px)
@media (max-width:320px)

в каждому классу вот это реальная дичь

[art style]

неужели нет директивы которая разрешит мне просто прописывать любые классы несмотря на их вложенность... писать media (max-width:1440px) к каждому классу это просто дикость!

[Сергей delphinpro]

art style,

я использую чисто для нестинга и порядка. перейдя на чистый css порядок и простота уйдут моментально.

в каждому классу вот это реальная дичь

Это и есть порядок

.advantages {
  @include rhythm-padding(1.5, 1);
  background-color: #fafafa;

  &__title { }

  &__items {
    @include rhythm-padding(0.5);
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  &__item {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    max-width: 100%;
    padding: rhythm(1) 0;
  }

  &__icon {
    align-self: flex-start;
    flex-shrink: 0;
    justify-content: center;
    width: rhythm(3);

    img {
      //@include size(rhythm(2));
      width: rhythm(2);
      display: block;
    }
  }

  &__text {
    @include font(14px, 1.25);
    @include font(16px, 1.25);
    color: $text-color;

    b,
    strong {
      text-transform: uppercase;
      color: #04589c;
      font-weight: bold;
    }
  }

  @include media-breakpoint-up(sm) {
    &_cols-2 &__item,
    &_cols-3 &__item {
      flex-basis: 50%;
      max-width: 50%;
    }
  }

  @include media-breakpoint-up(md) {
    &__items { @include rhythm-padding(1); }
    &__icon {
      width: 90px;
      img { width: rhythm(2.5); }
    }
    &__text { padding-right: 50px; }
  }

  @include media-breakpoint-up(xl) {
    @include rhythm-padding(2.5, 0.75);
    &__items { @include rhythm-padding(1.5); }
    &__icon {
      width: 122px;
      img { width: rhythm(3.25); }
    }
    &__text {
      b, strong {
        &:first-child {
          display: block;
        }
      }
    }
    &_cols-3 &__item {
      flex-basis: 33.3333%;
      max-width: 33.3333%;
    }
  }
}

[art style]

Сергей delphinpro, к сожалению больше похоже на беспорядок,
для меня порядок это вот так

я вижу что где лежит и мне легче ориентироваться в коде. то что выше это просто ад в котором нереально ориентироваться, да и нет у меня таких проектов где из sass надо выжимать все соки.
а это скобки это просто п-дец