Старый vs Новый — Урок 33

1. JS вместо CSS

❌ Старый подход: следить за шириной в JavaScript

Ширину экрана отслеживали скриптом и навешивали классы. Это дёргает layout, мигает при загрузке и ломается без JS.

📄 lesson-33/old.js

if (window.innerWidth > 768) {
  document.body.classList.add('desktop');
}
// + слушатель resize, чтобы пересчитывать… и так на каждый блок

✅ Современно: media query — браузер делает это сам

CSS реагирует на ширину нативно, без JS, без мигания и без слушателей событий.

📄 lesson-33/modern.css

@media (min-width: 48rem) {
  .layout { grid-template-columns: 18rem 1fr; }
}

2. desktop-first → mobile-first

Раньше базовый CSS писали под десктоп, а узкие экраны «чинили» через max-width. Сегодня чаще наоборот: база — телефон, а min-width добавляет колонки на широких экранах. Телефон получает самый лёгкий CSS.

❌ desktop-first (база — десктоп)

📄 lesson-33/old.css

.grid { grid-template-columns: repeat(3, 1fr); } /* десктоп */

@media (max-width: 47.99rem) {        /* откат под телефон */
  .grid { grid-template-columns: 1fr; }
}

✅ mobile-first (база — телефон)

📄 lesson-33/modern.css

.grid { grid-template-columns: 1fr; }  /* телефон */

@media (min-width: 48rem) {            /* усложняем под десктоп */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Результат одинаковый, но mobile-first читается как «расту от простого к сложному». Сравните оба превью:

📱 узкий — 1 колонка

.grid { grid-template-columns: 1fr; }

🖥️ широкий — 3 колонки

@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Подробное сравнение mobile-first и desktop-first — в уроках 34 и 35.

Урок 33. Старый vs Новый: Media queries: min/max-width, ориентация и prefers-*