Теория — Урок 35

Главная идея

В desktop-first базовые стили без всякого @media описывают широкий экран: полную сетку из нескольких колонок, развёрнутое горизонтальное меню, крупные отступы. Затем добавляются медиазапросы вида @media (max-width: 64rem) { … }, и каждый из них срабатывает, когда окно становится уже указанного порога — на этом пороге макет упрощается: колонки убираются, блоки складываются в стопку, размеры ужимаются.

Это прямое зеркало mobile-first из прошлого урока. Там база — телефон, а min-width достраивает макет «вверх», добавляя сложность на больших экранах. Здесь наоборот: база — десктоп, а max-width «срезает» сложность по мере сужения.

Desktop-first — это как вырезать одну фигуру из большой готовой картины под раму поменьше. У тебя уже есть полноценное широкое полотно (десктоп), и под узкую раму (телефон) ты отрезаешь лишнее: убираешь боковые колонки, сворачиваешь меню, ужимаешь поля. Mobile-first — обратное: ты дорисовываешь маленький эскиз до большой картины. Резать готовое проще, когда картина изначально «десктопная», но легко забыть отрезать какой-то кусок — и он торчит за рамой (горизонтальный скролл).

Как это работает: прогрессия колонок

Нагляднее всего desktop-first виден на сетке. База — три колонки. Сужаемся — становится две, ещё уже — одна. Каждый переход задаётся отдельным max-width:

Desktop-first: широкая база (3 колонки) → каждый max-width упрощает макет → 1 колонка на телефоне.

Когда применять

Подход не устарел и не запрещён, но у него своя ниша:

Legacy-проекты. Если кодовая база уже написана от десктопа, проще продолжать в том же стиле, чем переписывать всё на mobile-first.
Desktop-heavy интерфейсы. Админки, дашборды, CRM, таблицы — там основной сценарий это большой экран, а мобильная версия вторична.
Сложные многоколоночные макеты, где «полная» версия — это нормальное состояние, а мобильная — упрощённый частный случай.

Честно про выбор: для новых учебных и контентных страниц современный дефолт — mobile-first (min-width): он естественно ограничивает мобильную версию минимумом и реже даёт горизонтальный скролл. Desktop-first выбирают осознанно под десктоп-ориентированный продукт.

Правила, которые стоит запомнить

Ставьте max-width breakpoints от большего к меньшему, чтобы каскад читался сверху вниз.
На каждом breakpoint проверяйте не только ширину, но и порядок контента и видимость элементов.
Не только добавляйте, но и сбрасывайте: лишние колонки, fixed widths, большие отступы, hover-зависимое поведение.
Если переопределений стало слишком много и CSS трудно читать — это сигнал, что компонент проще переписать mobile-first.

Частая ошибка

Фиксированная ширина без ограничения. Десктопная база с width: 1180px на узком экране вылезает за пределы окна и даёт горизонтальный скролл — даже если вы добавили @media. Базу делайте гибкой (minmax(), max-width: 100%, проценты/fr), а медиазапросами меняйте раскладку, а не «чините» жёсткие пиксели.

Базовый пример

📄 lesson-35/styles.css

.admin-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 18rem;
  gap: 1.5rem;
}

@media (max-width: 64rem) {
  .admin-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
  }

  .admin-layout aside {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.99rem) {
  .admin-layout {
    display: block;
  }

  .admin-layout > * + * {
    margin-top: 1rem;
  }
}

Урок 35. Теория: Desktop-first подход