<divelopers>: “Условно адаптивно Подход к организации стилей, который предложил Вадим…”

Условно адаптивно

Подход к организации стилей, который предложил Вадим Макеев в одном из своих докладов.

Как мы обычно пишем стили:

.element {
  /* стили */
}

@media (max-width: 1024px) {
  .element {
    /* стили для экранов шириной 1024px и меньше */
  }
}

@media (max-width: 768px) {
  .element {
    /* стили для экранов шириной 768px и меньше */
  }
}

Это может быть подход Desktop First с max-width или Mobile First с min-width. Всё это может быть написано в одном файле или распределено по разным файлам и склеено в процессе сборки. Это может быть нативный CSS или SCSS. Не важно.

Суть в том, что:
- медиа-запросы каскадно переопределяют все предыдущие
- все стили склеиваются в один бандл, который подключается к странице.

Вадим предлагает другой подход:
- разделить стили по файлам на базовые и под конкретные группы экранов
- ограничить стили под группы экраны так, чтобы не было пересечений

Как это выглядит:

<head>
  <!-- ... -->
  <link rel="stylesheet" href="base.css" media="all">
  <link rel="stylesheet" href="mobile.css" media="(width < 768px)">
  <link rel="stylesheet" href="tablet.css" media="(768px <= width < 1024px)">
  <link rel="stylesheet" href="desktop.css" media="(width >= 1024px)">
  <!-- ... -->
</head>

Базовые стили применяются всегда. Атрибут media="all" можно не указывать, но пусть будет для наглядности. К базовыми стилями относятся те, которые применяются вне зависимости от экрана. Это могут быть директивы @font-face, сбросы, общие стили и т.д.

Стили для мобильных применяются на экранах с шириной до 768px. Планшетные стили применяются на экранах шириной от 768px, до 1024px не включая. Десктопные стили применяются на экранах от 1024px и выше. В примере используется Media Query Range Syntax, который уже неплохо поддерживается.

В итоге стили под разные группы экранов не конфликтуют между собой, потому что media взаимоисключающие. Во вкладке Styles в DevTools не будет каскада переопределений, это улучшает читаемость, упрощает отдадку и не заставляет отменять правила. Также всегда понятно, где искать нужные стили в проекте.

Важно ещё отметить, что такой подход обеспечивает прирост производительности. CSS — ресурс, блокирующий отрисовку. Браузеру нужны стили, чтобы отрисовать страницу. При использовании атрибута media у <link>, браузер проверяет медиа-запрос на соответствие. Если он соответствует параметрам, файл загружается как обычно. А вот если не соответствует, то, вопреки ожиданиям, он всё равно загружается, но с более низким приоритетом и, что самое главное, не блокирует отрисовку. В итоге стили загружаются и применяются быстрее, а значит отрисовка тоже происходит быстрее.

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

На одном из своих проектов я использовал этот подход и он мне в целом понравился. Рекомендую посмотреть доклад с более подробным объяснением идеи.