Как правильно сделать идеальную структуру less или scss файлов в случае больших адаптивных проектов?

Question

[Алексей Николаев]

Доброго дня.
Есть большой проект, где много less-кода. Все грамотно структурировано и разложено по папкам (layouts, modules, etc). Однако, когда встала задача сделать это адаптивным, метод, который я успешно применял для небольших и средних проектов перестал работать. Я делал 4 файла (screen, tablet, mobile, и т.д.), в которые вносил все правила, которые необходимо поменять в нужный момент. Проблема в том, что если этих правил очень много, данные файлы превращаются в кашу, где крайне трудно что-то найти.

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

.selector {
  // ...
}
@media(max-width: 768px) {
   .selector {
      // ...
   }
}

Но тут проблема в том, что файл слишком разрастается, и опять-таки превращается в лапшу.

Как правильнее организовывать структуру файлов с медиа-запросами в случае очень крупных проектов?
Спасибо.

Answer 1

[Кот Учёный]

Методология БЭМ придётся Вам по вкусу. Но, я так понимаю, в Вашем текущем проекте — уже поздно. Тем не менее, на текущем этапе разработки Вам будет полезно использовать эти принципы. Изучите вопрос. А Ваша проблема решается так:

@mobile: (max-width: 460px);
@tablet:  (min-width: 461px) and (max-width: 970px);
@desktop: (min-width: 971px);

// Значения придуманы от балды

.selector {
  @media @mobile {
    // ...
  }
  @media @tablet {
    // ...
  }
  @media @desktop {
    // ...
  }
}

Чтобы не было лапши, избегайте каскадов. CSS и LESS дают нам очень много гибких фич, но это не значит, что мы должны использовать все и сразу. У Вас должны быть очень веские основания, чтобы использовать что-либо из этого.

Тем временем, где-то в идеальном мире:

/* Файл /bem/block/block.less */
.block {
  @media @mobile {
    // ...
  }
  @media @tablet {
    // ...
  }
  @media @desktop {
    // ...
  }
}

/* Файл /bem/block/__element/block__element.less */
.block {
  &__element {
    @media @mobile {
      // ...
    }
    @media @tablet {
      // ...
    }
    @media @desktop {
      // ...
    }
  }
}

Answer 2

[Юрий Кучеренко]

1) При таком подходе будет всегда путаница, куча разные классов, правил, нужно коммент делать под каждым запросом.
2) А зачем собственно выносить медию в отдельный файл когда можно делать запрос прямо в правиле и с помощью gulp-combile-media-queries успешно при компиляции выносить всю медию в конец цсс?

Answer 3

[Сергей Ларионов]

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

Миксины:

.media-mobile(@rules)  {
    @media (max-width: @mobile-width) {
        @rules();
    };
}

.media-lower(@width, @rules)  {
    @media (max-width: @width) {
        @rules();
    };
}

Использование:

.selector {
   // ...

   .media-mobile({
      // ...
   });

    .media-lower(600px, {
      // ...
   });
}

Подход на основе "@media @mobile" и пр. проще и в ряде случаев удобнее.
Мой вариант более функционален. Можно привязаться не только к ширине экрана, а к чему только душа пожелает.